{"componentChunkName":"component---src-templates-post-js","path":"/blog/fluent-acrylic","webpackCompilationHash":"0f979b9b09e9513b4912","result":{"data":{"site":{"siteMetadata":{"keywords":["blog","ubug","tech blog","技术博客","playground"]}},"mdx":{"fields":{"title":"🐏 Web 实现 Fluent UI 的 Acrylic 亚克力效果和组件库的能力","tips":[],"categories":["code"],"datetime":"2020-08-05 19:18:10","noFooter":false,"description":"CSS 的能力已经很强大了，前两天看到了微软的 FluentDesign，尝试用 CSS 实现下。","plainTextDescription":"CSS 的能力已经很强大了，前两天看到了微软的 FluentDesign，尝试用 CSS 实现下。\n","author":"Ubug","banner":null,"bannerCredit":null,"slug":"/blog/fluent-acrylic","tags":["css","acrylic","UI-Library"]},"headings":[{"value":"一、什么是亚克力","depth":2},{"value":"二、效果","depth":2},{"value":"三、实现过程","depth":2},{"value":"简单来说","depth":3},{"value":"四、注意事项","depth":2},{"value":"CSS 使用限制：","depth":3},{"value":"五、源码","depth":2},{"value":"六、亚克力风格的组件库(Acrylic UI Components Library)","depth":2}],"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"fluent-acrylic\",\n  \"title\": \"🐏 Web 实现 Fluent UI 的 Acrylic 亚克力效果和组件库的能力\",\n  \"date\": \"2020-08-05 19:18:10\",\n  \"author\": \"Ubug\",\n  \"description\": \"CSS 的能力已经很强大了，前两天看到了微软的 FluentDesign，尝试用 CSS 实现下。\",\n  \"categories\": [\"code\"],\n  \"tags\": [\"css\", \"acrylic\", \"UI-Library\"]\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst CodeWithPreview = makeShortcode(\"CodeWithPreview\");\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"IOS \\u4E0A\\u7684\\u80CC\\u666F\\u6A21\\u7CCA\\u6548\\u679C\\u771F\\u7684\\u975E\\u5E38\\u7684\\u60CA\\u8273\\uFF0C\\u4ECE CSS backdrop-filter \\u8FD9\\u4E2A\\u5C5E\\u6027\\u53EF\\u7528\\u4EE5\\u6765\\u5C31\\u5B9E\\u9A8C\\u6027\\u7684\\u73A9\\u8FC7\\uFF0C\\u9664\\u4E86\\u517C\\u5BB9\\u6027\\u95EE\\u9898\\u4E0A\\u786C\\u4F24(\\u76EE\\u524D 86% \\u5DE6\\u53F3\\uFF0C\\u5C24\\u5176\\u662F\\u56FD\\u5185 X5 \\u5185\\u6838\\u7B49\\u9B54\\u6539\\u5185\\u6838\\uFF08\\u5FAE\\u4FE1\\u548C\\u5F88\\u591A APP \\u5185\\u7F6E\\u7684\\u6D4F\\u89C8\\u5668\\uFF09)\\uFF0C\\u6548\\u679C\\u8FD8\\u662F\\u5F88\\u4E0D\\u9519\\u7684\\u3002\"), mdx(\"h2\", null, \"\\u4E00\\u3001\\u4EC0\\u4E48\\u662F\\u4E9A\\u514B\\u529B\"), mdx(\"p\", null, \"\\u524D\\u4E24\\u5929\\u53C8\\u770B\\u5230\\u4E86\\u5FAE\\u8F6F\\u7684 Fluent Design\\uFF0CFluent Design System \\u53EF\\u5E2E\\u52A9\\u4F60\\u521B\\u5EFA\\u5305\\u542B\\u5149\\u7EBF\\u3001\\u6DF1\\u5EA6\\u3001\\u52A8\\u753B\\u3001\\u6750\\u6599\\u548C\\u6BD4\\u4F8B\\u7684\\u73B0\\u4EE3\\u7C97\\u4F53 UI\\u3002\"), mdx(\"p\", null, \"\\u5176\\u4E2D\\u770B\\u5230\\u4E86 UWP \\u8BBE\\u8BA1\\u548C UI \\u4E2D\\u4ECB\\u7ECD\\u7684\\u4E00\\u4E2A\\u6548\\u679C\\uFF1A\\u4E9A\\u514B\\u529B\\u6750\\u6599\\u3002Acrylic \\u662F\\u4E00\\u79CD Fluent Design \\u7CFB\\u7EDF\\u7EC4\\u4EF6\\uFF0C\\u7528\\u4E8E\\u5728\\u4F60\\u7684\\u5E94\\u7528\\u4E2D\\u6DFB\\u52A0\\u7269\\u7406\\u7EB9\\u7406\\uFF08\\u6750\\u6599\\uFF09\\u548C\\u6DF1\\u5EA6\\u3002 \"), mdx(\"p\", null, \"\\u8BE6\\u7EC6\\u53EF\\u4EE5\\u67E5\\u770B\\u5177\\u4F53\\u7684\\u6587\\u7AE0\\uFF1A \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://docs.microsoft.com/zh-cn/windows/uwp/design/style/acrylic\"\n  }, \"\\u4E9A\\u514B\\u529B\\u6750\\u6599\")), mdx(\"div\", {\n    \"style\": {},\n    \"\\\"flex\\\",\": \"\",\n    \"justifycontent:\": \"\",\n    \"\\\"space-around\\\"}}\": \"\"\n  }, \"\\n  \", mdx(\"figure\", {\n    parentName: \"div\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {},\n    \"\\\"40%\\\"}}\": \"\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"800px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/7e99683469c043683adf7eebe5c621ec/d5c83/acrylic_lighttheme_base.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"56.37065637065637%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAAsSAAALEgHS3X78AAACqklEQVQozwGfAmD9ALaMdLqReL6Sd8umkdS0oNaznNm2nt25nuG7ntWwodu2oOW/oeO/o+K+o+C9ouDApdGxmsObg7+ZhL+XfwCTcWuWc2+ne3HPta3i1dDfzsngzcnizMfiycXixsTixsTgxsXdx8bbyMfayMfdz8/Mr6uweXG7hHO/hXAAmFtXqGNctWhe1Kag48rF48O85cS76cS57MW37si07siz7ca27Me36se66Ma66MvB5K2Z3XpV3H9Z34FbAMVmR85rSNpsQ+Snj+rLvu7GtfHJtfHLs/HSsvHhuPHiuPLUs/LPtfHOtfHMte/Qvve4kf6OR/uMS7toNwAyIRxLNjFeQDmumJLVx8LXwrvdxr3gxrzky7nt1r/t17/lzbrfyLvgyb7gyb7hz8bRrp5zRC9BJhkcEQwAKysvNDM5PTk/k4+RwLy9urW2wbq7wbm5w7W1z7e11r26xLe2saysurW0xb++0szKgoCBAAAAAQEBAwIDADU4QDY7RTg8SoqKkbm3uLSytLCur6yqq62oqa6mp6+nqKqlpqShoqakpKqnp7Wzs29tbQAAAAYFBAMCAgA9NjQ7NTNCNzaglZPMxsTIwL3Fvru6trXAurm6trWzsLCzsbGzsbGrqqunpqe0tLRycXIDAwMHBwgEBQUAHBoWHBoXNispmIB4xKacv6KYjoaEfXx9l46Nmo6NqZuYrZ+bqZ6am5SSkIyLlJGRaWhoPjg2Pjk4KCcnABQSDhQSDh0ZFjEmIzsqJGlBNmhEOG9IOotTQYBQQX1XS3ZXTWdSSmZTTGNSTFhLRkM8OkM8OkhBPTczMQAQDwwUEg4VExAiHBkrIyAtJiU3LStvRTnCXT2rW0OOW0p7WEtSQjxgTUZzXFFvXFJgUElUSUQ8ODcrKSnl7mS+tjR43gAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"acrylic lighttheme base\",\n    \"title\": \"acrylic lighttheme base\",\n    \"src\": \"/static/7e99683469c043683adf7eebe5c621ec/d5c83/acrylic_lighttheme_base.png\",\n    \"srcSet\": [\"/static/7e99683469c043683adf7eebe5c621ec/2c191/acrylic_lighttheme_base.png 259w\", \"/static/7e99683469c043683adf7eebe5c621ec/86b01/acrylic_lighttheme_base.png 518w\", \"/static/7e99683469c043683adf7eebe5c621ec/d5c83/acrylic_lighttheme_base.png 800w\"],\n    \"sizes\": \"(max-width: 800px) 100vw, 800px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u6D45\\u8272\\u4E3B\\u9898\\u4E9A\\u514B\\u529B\"), \"\\n  \"), \"\\n  \", mdx(\"figure\", {\n    parentName: \"div\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {},\n    \"\\\"40%\\\"}}\": \"\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"800px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/162d07011c1c998885889471a98bd788/d5c83/acrylic_darktheme_base.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"56.37065637065637%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAAsSAAALEgHS3X78AAACmUlEQVQozxWOSU8TYQCGvwDFYAgtS/faZTrTWTrTTmdppx2mhbbTjRbK1tDpAgHlABVtRUCQgAt6kJCoEEQTIF44GK8kaCLhoDd/gQcO/gsvWpMn7+l9kgec7z64eL12dbB++vj2bq1wUJ86bBQ/PCyerBbf1ErvGuWPG+XTjerJevV4vXK0Vj7bufvj+MW3o2eXh9vgbX1xv770+clqLZ8UKVzmPHGaTHiJBIklcLRJnEAHCTxCEAMeMoBjC0Px862Vi6eNy5174KhUOJstfV2aW00Ppmn3BEdOsMQUi5Y4VzngrAScZR4p8WjRjxUDRI7BXuZDv7eUX5tT19sK+H4n+XMheV1PvUjROS9U4eEKD1UFezViqw4j/xm0TfdDVRGaEeFxDnpf9P3dz/55lfkyHwA+hyXD03OJ8GiICbpdCR+RYYkci48KLiXmVuLkWAjN8ljO7x4WqDhLLOeltTQbgQ1mTScgSZphhFhE9vt8TrsDhxEPinkQhIagftgRJVAf7LQajCjk4DwkT3sRhwOAFgBAa2sr4AIRPiiHo3kvxVgtVhhCbBar2WA06/QWrfaWTmfs6+vRdPf19Jj0epPB0KvuUrW1qNqabguQ/FyIYzKSGGa9KGSnMQR32m1mE2yzNteo0xl0+iYaTXdXl1qt6daoO292dLS331CpVMBi0jUvIS+lDPgVka5EWBKymo16nsAEApUDTEbkE0FOoEkv7iJRhMSQqBSSBAFDUaDtVWt71FaTnsWQCIXW5GAtJS5npb1C7Pl4fFvJPVLyi5O5hcLI/ORweSQth8WYGEoNSALrAxazsVnpsFncLpih3JyHavY30uLVdPjTjLxXzW5WRpWhxPxkfmW2eH+6UM7KY8moJPAUgf0DtWSpJElNYr8AAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"acrylic darktheme base\",\n    \"title\": \"acrylic darktheme base\",\n    \"src\": \"/static/162d07011c1c998885889471a98bd788/d5c83/acrylic_darktheme_base.png\",\n    \"srcSet\": [\"/static/162d07011c1c998885889471a98bd788/2c191/acrylic_darktheme_base.png 259w\", \"/static/162d07011c1c998885889471a98bd788/86b01/acrylic_darktheme_base.png 518w\", \"/static/162d07011c1c998885889471a98bd788/d5c83/acrylic_darktheme_base.png 800w\"],\n    \"sizes\": \"(max-width: 800px) 100vw, 800px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u9ED1\\u8272\\u4E3B\\u9898\\u7684\\u4E9A\\u514B\\u529B\"), \"\\n  \")), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"903px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/fd9b02a14dd73b475486e81c2da035d5/bc196/mail_transientcontextmenu.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"54.05405405405405%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAAsTAAALEwEAmpwYAAABg0lEQVQoz21S246bMBT0//9Tn9u+VepKWZUQEmCxffANbHwJ2W4nRvvUHaHR8WXsmYPZt++/fpyGn7+b040GkzsKF7G2fDlPTi3R++DcklKKMeacUZRSUBzMLhRaGXqdOvItt39G83qVr93b6TLO1i+rd85Z5yDb9/3+ib2CKanErLmcfcxlfwfz2Y5C4Qsxe++ttbdb35zPXUXTNG3bXiqYJcX1Os0wuak1kVm1daQUOJe7RU107a5A3/fDMIzjCJ6mCQVLNQn2IccWIxIaY42149sUNmT2Sils5ZzPFRgaY8CoGUmK25ZrNxAjxgQ9rKqKtUJrDc6fOLqF5GxsXmCR8wknPR4PTC3LU3zoUcMXxFg9DsLMwZhnuDCmFMIGYIwlyIikEBKpIKt2IvjjPzD8iBD8toWPv8A74kOvNYI7SYR48IIs8IllCA4+CtZ115vQvdAmFNjG5ZApbSShN0+3QogQQin3L27eIcgFX6zPCO3VT6WaOHFBUqpZaTyVL23/A80AbDQP4WSsAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"亚克力菜单背景\",\n    \"title\": \"亚克力菜单背景\",\n    \"src\": \"/static/fd9b02a14dd73b475486e81c2da035d5/bc196/mail_transientcontextmenu.png\",\n    \"srcSet\": [\"/static/fd9b02a14dd73b475486e81c2da035d5/2c191/mail_transientcontextmenu.png 259w\", \"/static/fd9b02a14dd73b475486e81c2da035d5/86b01/mail_transientcontextmenu.png 518w\", \"/static/fd9b02a14dd73b475486e81c2da035d5/bc196/mail_transientcontextmenu.png 903w\"],\n    \"sizes\": \"(max-width: 903px) 100vw, 903px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u4E9A\\u514B\\u529B\\u83DC\\u5355\\u80CC\\u666F\"), \"\\n  \")), mdx(\"p\", null, \"\\u6700\\u540E\\u6574\\u4E2A\\u6548\\u679C\\u7684\\u5B9E\\u73B0\\uFF0C\\u6709\\u8BB2\\u9700\\u8981\\u51E0\\u4E2A\\u6548\\u679C\\u53E0\\u52A0\\uFF1A\"), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1035px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/c342454691ca9b948e27e6ba0f286f4b/bb4cb/acrylicrecipe_diagram.jpg\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"56.37065637065637%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAEEAv/EABQBAQAAAAAAAAAAAAAAAAAAAAL/2gAMAwEAAhADEAAAAbd3NAGF/wD/xAAZEAACAwEAAAAAAAAAAAAAAAABAgMEEiD/2gAIAQEAAQUCnZ91wRz/AP/EABgRAAIDAAAAAAAAAAAAAAAAAAECEBEh/9oACAEDAQE/AQu3H//EABcRAAMBAAAAAAAAAAAAAAAAABAREiH/2gAIAQIBAT8BrEP/xAAZEAACAwEAAAAAAAAAAAAAAAABEQAgQWH/2gAIAQEABj8CIZXIsr//xAAaEAEAAgMBAAAAAAAAAAAAAAABEBEAITFB/9oACAEBAAE/IaRDzxl0hFuEHpP/2gAMAwEAAgADAAAAEDsP/8QAFhEAAwAAAAAAAAAAAAAAAAAAEBEh/9oACAEDAQE/EE0H/8QAFxEAAwEAAAAAAAAAAAAAAAAAARARIf/aAAgBAgEBPxA3gv/EABoQAQADAQEBAAAAAAAAAAAAAAEAESExEHH/2gAIAQEAAT8QCK1A6Zuwu/LSu/WGEp6GuWQAKCvP/9k=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"如何设计 Acrylic\",\n    \"title\": \"如何设计 Acrylic\",\n    \"src\": \"/static/c342454691ca9b948e27e6ba0f286f4b/dcf47/acrylicrecipe_diagram.jpg\",\n    \"srcSet\": [\"/static/c342454691ca9b948e27e6ba0f286f4b/fca29/acrylicrecipe_diagram.jpg 259w\", \"/static/c342454691ca9b948e27e6ba0f286f4b/f4507/acrylicrecipe_diagram.jpg 518w\", \"/static/c342454691ca9b948e27e6ba0f286f4b/dcf47/acrylicrecipe_diagram.jpg 1035w\", \"/static/c342454691ca9b948e27e6ba0f286f4b/cd483/acrylicrecipe_diagram.jpg 1553w\", \"/static/c342454691ca9b948e27e6ba0f286f4b/bb4cb/acrylicrecipe_diagram.jpg 1920w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u5982\\u4F55\\u8BBE\\u8BA1 Acrylic\"), \"\\n  \")), mdx(\"p\", null, \"\\u6309\\u7167\\u8BF4\\u6CD5\\uFF1A\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\u6211\\u4EEC\\u5FAE\\u8C03 Acrylic \\u7684\\u5173\\u952E\\u7EC4\\u4EF6\\u4EE5\\u51F8\\u663E\\u5176\\u72EC\\u7279\\u5916\\u89C2\\u548C\\u5C5E\\u6027\\u3002 \\u6211\\u4EEC\\u4ECE\\u534A\\u900F\\u660E\\u5EA6\\u3001\\u6A21\\u7CCA\\u548C\\u566A\\u70B9\\u8BBE\\u7F6E\\u5F00\\u59CB\\uFF0C\\u4E3A\\u5E73\\u6ED1\\u56FE\\u9762\\u589E\\u6DFB\\u89C6\\u89C9\\u6DF1\\u5EA6\\u548C\\u7EF4\\u5EA6\\u3002 \\u6211\\u4EEC\\u6DFB\\u52A0\\u4E86\\u6392\\u9664\\u6DF7\\u5408\\u6A21\\u5F0F\\u5C42\\uFF0C\\u4EE5\\u786E\\u4FDD\\u653E\\u7F6E\\u5728 Acrylic \\u80CC\\u666F\\u4E0A\\u7684 UI \\u7684\\u5BF9\\u6BD4\\u5EA6\\u548C\\u53EF\\u8BFB\\u6027\\u3002 \\u6700\\u540E\\uFF0C\\u6211\\u4EEC\\u6DFB\\u52A0\\u4E86\\u5404\\u79CD\\u989C\\u8272\\u8272\\u8C03\\uFF0C\\u4EE5\\u4F9B\\u7528\\u6237\\u8FDB\\u884C\\u4E2A\\u6027\\u5316\\u8BBE\\u7F6E\\u3002 \\u8FD9\\u4E9B\\u56FE\\u5C42\\u534F\\u540C\\u4F5C\\u7528\\uFF0C\\u5F62\\u6210\\u4E86\\u5168\\u65B0\\u7684\\u5B9E\\u7528\\u6750\\u6599\\u3002\")), mdx(\"p\", null, \"\\u6240\\u4EE5\\u4E9A\\u514B\\u529B\\u6548\\u679C\\u4E0D\\u4EC5\\u4EC5\\u662F\\u80CC\\u666F\\u6A21\\u7CCA\\uFF0C\\u8FD8\\u9700\\u8981\\u8003\\u8651\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u80CC\\u666F\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u6A21\\u7CCA\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u6392\\u9664\\u6DF7\\u5408\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u989C\\u8272/\\u8272\\u8C03\\u8986\\u76D6\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u566A\\u70B9\")), mdx(\"h2\", null, \"\\u4E8C\\u3001\\u6548\\u679C\"), mdx(\"p\", null, \"CSS \\u6765\\u8BD5\\u8BD5\\u5B9E\\u73B0\\u8FD9\\u4E2A\\u6548\\u679C\\uFF08\\u8BF7\\u4F7F\\u7528 Chrome V76+\\uFF1B\\u4ECE\\u5DE6\\u5230\\u53F3\\u4E3A\\u5404\\u4E2A\\u6548\\u679C\\u53E0\\u52A0\\u7684\\u8FC7\\u7A0B\\uFF1B\\u6E90\\u7801\\u5728\\u6700\\u4E0B\\u9762\\uFF09\\uFF1A\"), mdx(AcrylicEffect, {\n    mdxType: \"AcrylicEffect\"\n  }), mdx(\"p\", null, \"\\u5DE6\\u8FB9\\u7684\\u60AC\\u6D6E\\u83DC\\u5355\\u662F CSS \\u5B9E\\u73B0\\u7684\\uFF0C\\u770B\\u8D77\\u6765\\u8FD8\\u662F\\u5F88\\u7CBE\\u81F4\\u7684\\uFF1A\"), mdx(AcrylicEffect2, {\n    mdxType: \"AcrylicEffect2\"\n  }), mdx(AcrylicEffectStyle, {\n    mdxType: \"AcrylicEffectStyle\"\n  }), mdx(\"h2\", null, \"\\u4E09\\u3001\\u5B9E\\u73B0\\u8FC7\\u7A0B\"), mdx(\"p\", null, \"\\u5927\\u90E8\\u5206\\u5BA3\\u79F0\\u73BB\\u7483\\u6548\\u679C\\u7684 CSS \\u5B9E\\u73B0\\uFF0C\\u57FA\\u672C\\u4E0A\\u5C31\\u662F\\u53EA\\u5E94\\u7528\\u5230\\u4E86 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"backdrop-filter: blur(30px);\"), \" \\u4E00\\u4E2A\\u5C5E\\u6027\\uFF0C\\u5F88\\u591A\\u65F6\\u5019\\u80CC\\u666F\\u5982\\u679C\\u989C\\u8272\\u4E0D\\u592A\\u642D\\u914D\\uFF0C\\u4F1A\\u51FA\\u73B0\\u666E\\u9002\\u7684\\u6587\\u5B57\\u5BF9\\u6BD4\\u5EA6\\u3001\\u989C\\u8272\\u6548\\u679C\\u7B49\\u4E0D\\u534F\\u8C03\\uFF0C\\u6240\\u4EE5\\u4E1A\\u52A1\\u4E2D\\u7528\\u5230\\u5F88\\u5C11\\u3002\"), mdx(\"p\", null, \"apple \\u5B98\\u7F51\\u7684\\u6548\\u679C\\u7528\\u5230\\u4E86 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"backdrop-filter: saturate(200%) blur(20px);\"), \" \\u52A0\\u4E0A\\u4E00\\u4E2A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"background-color\"), \" \\u53EF\\u4EE5\\u5B9E\\u73B0\\u6574\\u4F53\\u8272\\u8C03\\u548C\\u9971\\u548C\\u5EA6\\u8C03\\u6574\\uFF0C\\u6548\\u679C\\u597D\\u5F88\\u591A\\u3002\"), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1022px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/f502c8e190f149e9045dfaa1d4d9c1ad/26efe/apple-cn-ipad.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"44.78764478764479%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAABYlAAAWJQFJUiTwAAAB8klEQVQoz2WSfU/aUBSH+f6fY8v+GnFGQVF0Zuh82zRMRQptkUJboEB7+wal8Oy0y0yWneSXe3vT+7vnOedUttstReSy5tuche+jmwM6XU1Wk/ufD7z2LSaLmNU6Y71el8qy7F3Ft2VZ2LZNxV8GeJaDb9oklkcyDVhOF8xnS2bOgk67h+s4hMonjmOiKGKz2bDb7fibTBHFWaGKqZvcnF7w+vWaya8+2USRTgISN0TZiv6TyXhsE4rZMggIwrDcp6tVaZqmKaGcFY8VqiTrDZE2ZHFwxXT/ilH1EvvogdFxm+7nH9ztX6PrOsbLC2+axsgwGEsphqaBN/dwXbc0DOQxpRSVKE5Rgj0bjJnrI4Kxhyf4njXF6Vp0HjuEgSKTi46Y2p1X3F6PsWEymc5YLJeSWfKOXknTNaOxw/nFNy5al2i6wffbO6p7XzhqnHBYq0kWNrn8HCSCJ4hx0RSpV57nJElSohboJfJqlaH3TVqtK2qHdT5++MRJo0nz9Ixm85xqdY/WzSNau43+/MSbZFeoLzIEv9vtlt113UmJXRoOBsPy4sFBjXr9uDS6vb3n+emFw3qDsweHWBrjiYmt9fCHQ2Kp18ybC7KPJ6tS4R/kWGoYRYkUNv5PSkWSvYEKfIoBSQQ1EsRU5nHHv1F0vBib36HImR86/PdmAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"iPad 页面的效果\",\n    \"title\": \"iPad 页面的效果\",\n    \"src\": \"/static/f502c8e190f149e9045dfaa1d4d9c1ad/26efe/apple-cn-ipad.png\",\n    \"srcSet\": [\"/static/f502c8e190f149e9045dfaa1d4d9c1ad/2c191/apple-cn-ipad.png 259w\", \"/static/f502c8e190f149e9045dfaa1d4d9c1ad/86b01/apple-cn-ipad.png 518w\", \"/static/f502c8e190f149e9045dfaa1d4d9c1ad/26efe/apple-cn-ipad.png 1022w\"],\n    \"sizes\": \"(max-width: 1022px) 100vw, 1022px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"iPad \\u9875\\u9762\\u7684\\u6548\\u679C\"), \"\\n  \")), mdx(\"p\", null, \"\\u6211\\u8FD9\\u91CC\\u5B9E\\u73B0\\u7684\\u6574\\u4E2A\\u6548\\u679C\\u5E76\\u6CA1\\u6709\\u6309\\u7167\\u4E9A\\u514B\\u529B\\u5B98\\u65B9\\u7684\\u5404\\u4E2A\\u5C42\\u7EA7\\u6765\\u5B9E\\u73B0\\uFF0C\\u4E3B\\u8981\\u662F CSS \\u7684\\u6DF7\\u5408\\u6A21\\u5F0F mix-blend-mode \\u548C\\u60F3\\u8981\\u7684\\u6548\\u679C\\u5E76\\u4E0D\\u4E00\\u81F4\\uFF0C\\u6CA1\\u529E\\u6CD5\\u53E0\\u52A0\\u4E0A\\u53BB\\uFF0C\\u6240\\u4EE5\\u57FA\\u672C\\u4E0A\\u7528\\u7684\\u8FD8\\u662F backdrop-filter \\u5C5E\\u6027\\u3002\"), mdx(\"p\", null, \"\\u7528\\u5230\\u7684\\u5C5E\\u6027\\u6709:\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"backdrop-filter: blur(30px);\"), \" \\u8D1F\\u8D23\\u80CC\\u666F\\u6A21\\u7CCA\\uFF0C\\u8FD9\\u4E2A\\u662F\\u6700\\u57FA\\u7840\\u7684\\u6548\\u679C\\uFF0C\\u5982\\u679C\\u4EC5\\u4F7F\\u7528\\u8FD9\\u4E2A\\u6548\\u679C\\u4E5F\\u53EF\\u4EE5\\uFF0C\\u4F46\\u662F\\u53EF\\u80FD\\u6CA1\\u529E\\u6CD5\\u4E2A\\u6027\\u5316\\u6548\\u679C\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"backdrop-filter: brightness(120%);\"), \" \\u8D1F\\u8D23\\u4EAE\\u5EA6\\uFF0C\\u5C06\\u6574\\u4E2A\\u6548\\u679C\\u53D8\\u4EAE\\u8FD8\\u662F\\u51CF\\u6697\\uFF0C\\u4E3B\\u8981\\u53EF\\u4EE5\\u7528\\u5728\\u6697\\u9ED1\\u8FD8\\u662F\\u4EAE\\u8272\\u4E3B\\u9898\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"background-color\"), \" \\u8D1F\\u8D23\\u6DFB\\u52A0\\u989C\\u8272\\u8272\\u8C03\\uFF0C\\u4E3B\\u8981\\u7684\\u4E2A\\u6027\\u5316\\u5C5E\\u6027\\uFF0C\\u9700\\u8981\\u914D\\u5408 opacity \\u907F\\u514D\\u5F71\\u54CD\\u540E\\u9762\\u7684\\u900F\\u660E\\u5EA6\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"backdrop-filter: saturate(80%);\"), \" \\u8D1F\\u8D23\\u9971\\u548C\\u5EA6\\uFF0C\\u592A\\u9C9C\\u8273\\u7684\\u80CC\\u666F\\u8272\\u4F1A\\u5E72\\u6270\\u524D\\u666F\\u4FE1\\u606F\\uFF0C\\u8FD9\\u4E2A\\u53EF\\u4EE5\\u7A0D\\u5FAE\\u538B\\u4E00\\u4E0B\\u9971\\u548C\\u5EA6\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"background-image\"), \" \\u8D1F\\u8D23\\u6DFB\\u52A0\\u4E00\\u4E2A\\u566A\\u70B9\\u5C42\\uFF0C\\u4E3B\\u8981\\u662F\\u63D0\\u4F9B\\u4E9A\\u514B\\u529B\\u78E8\\u7802\\u54D1\\u5149\\u7684\\u6548\\u679C\\u3002\")), mdx(\"p\", null, \"\\u76F8\\u6BD4 apple \\u7684\\u6548\\u679C\\u6DFB\\u52A0\\u4E86\\u4E00\\u4E2A brightness \\u6765\\u8C03\\u6574\\u80CC\\u666F\\u4EAE\\u5EA6\\uFF0C\\u4E0D\\u9700\\u8981\\u989C\\u8272\\u5C42\\u7684\\u6DF1\\u6D45\\u6765\\u627F\\u62C5\\u8FD9\\u4E2A\\u6548\\u679C\\u3002\\u7136\\u540E\\u989C\\u8272\\u5C42\\u66F4\\u591A\\u7684\\u662F\\u8FDB\\u884C\\u4E2A\\u6027\\u5316\\u7684\\u989C\\u8272\\u8C03\\u6574\\u3002\\u6700\\u540E\\u662F\\u6DFB\\u52A0\\u566A\\u70B9\\u5C42\\uFF0C\\u589E\\u52A0\\u78E8\\u7802\\u6548\\u679C\\uFF0C\\u8FD9\\u4E2A\\u6548\\u679C\\u53EF\\u80FD\\u6CA1\\u90A3\\u4E48\\u660E\\u663E\\uFF0C\\u4E0D\\u8FC7\\u4ED4\\u7EC6\\u770B\\u53EF\\u80FD\\u89C2\\u611F\\u8212\\u670D\\u4E00\\u70B9\\u70B9\\u3002\"), mdx(\"h3\", null, \"\\u7B80\\u5355\\u6765\\u8BF4\"), mdx(\"p\", null, \"backdrop \\u53EF\\u4EE5\\u540C\\u65F6\\u6DFB\\u52A0\\u591A\\u4E2A\\u6EE4\\u955C\\uFF0C\\u6240\\u4EE5\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-css\"\n  }, \".acrylic {\\n  backdrop-filter: blur(30px) brightness(80%) saturate(160%);\\n  background-color: rgba(x, x, x, .5); /* \\u8FD9\\u91CC\\u5982\\u679C\\u6DFB\\u52A0\\u989C\\u8272\\u4E2A\\u6027\\u8BBE\\u7F6E\\uFF0C\\u9700\\u8981\\u6709\\u900F\\u660E\\u5EA6\\uFF0C\\u4E0D\\u7136\\u770B\\u4E0D\\u5230\\u540E\\u9762 */\\n  background-image: url(...); /* \\u566A\\u70B9\\u7684\\u56FE\\u7247 */\\n}\\n\")), mdx(\"p\", null, \"\\u8FD9\\u6837\\u5C31\\u5B9E\\u73B0\\u4E86\\u5F88\\u7B80\\u5355\\u7684\\u4E00\\u4E2A\\u4E9A\\u514B\\u529B\\u6548\\u679C\\uFF0C\\u540C\\u65F6\\u4EAE\\u5EA6\\u548C\\u9971\\u548C\\u5EA6\\u7684\\u8C03\\u6574\\u80FD\\u591F\\u6EE1\\u8DB3\\u5927\\u90E8\\u5206\\u7684\\u524D\\u666F\\u5BF9\\u6BD4\\u5EA6\\u3002\"), mdx(\"h2\", null, \"\\u56DB\\u3001\\u6CE8\\u610F\\u4E8B\\u9879\"), mdx(\"p\", null, \"\\u4E9A\\u514B\\u529B\\u7684\\u6548\\u679C\\u9700\\u8981\\u80CC\\u666F\\u3001\\u4EAE\\u5EA6\\u3001\\u9971\\u548C\\u5EA6\\u7B49\\u5C5E\\u6027\\u914D\\u5408\\uFF0C\\u4E00\\u65E6\\u8FD9\\u51E0\\u4E2A\\u5C5E\\u6027\\u6CA1\\u642D\\u914D\\u597D\\uFF0C\\u8DDF\\u524D\\u666F\\u7684\\u5185\\u5BB9\\u5BF9\\u6BD4\\u5EA6\\u4E0D\\u9AD8\\uFF0C\\u5C31\\u4F1A\\u5BFC\\u81F4\\u53EF\\u8BFB\\u6027\\u95EE\\u9898\\u3002\\u6240\\u4EE5\\u8C03\\u6574\\u6548\\u679C\\u7684\\u65F6\\u5019\\u4E00\\u5B9A\\u8981\\u7CBE\\u5FC3\\u8C03\\u6574\\uFF0C\\u907F\\u514D\\u4E0D\\u900F\\u660E\\u5EA6\\u3001\\u989C\\u8272\\u3001\\u4EAE\\u5EA6\\u7B49\\u6DF7\\u5728\\u5230\\u524D\\u666F\\u5185\\u5BB9\\u4E2D\\uFF0C\\u9020\\u6210\\u8BC6\\u522B\\u56F0\\u96BE\\uFF0C\\u6548\\u679C\\u81EA\\u7136\\u6CA1\\u529E\\u6CD5\\u4FDD\\u8BC1\\u3002\"), mdx(\"p\", null, \"\\u6BD4\\u5982\\u4E0A\\u9762\\u7684 brightness \\u5982\\u679C\\u8C03\\u6574\\u5F88\\u9AD8\\uFF0C\\u52A0\\u4E0A\\u524D\\u666F\\u6587\\u5B57\\u5982\\u679C\\u662F\\u767D\\u8272\\uFF0C\\u90A3\\u4E48\\u6587\\u5B57\\u57FA\\u672C\\u4E0A\\u5C31\\u662F\\u6CA1\\u529E\\u6CD5\\u9605\\u8BFB\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u5B98\\u7F51\\u4E5F\\u91CD\\u70B9\\u5F3A\\u8C03\\uFF1A\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\u8BF7\\u52A1\\u5FC5\\u786E\\u4FDD\\u5E94\\u7528\\u4E0A\\u663E\\u793A\\u7684\\u4EFB\\u4F55\\u6587\\u672C\\u6EE1\\u8DB3\\u5BF9\\u6BD4\\u7387\\u8981\\u6C42\\u3002 \\u6211\\u4EEC\\u5DF2\\u4F18\\u5316 Acrylic \\u8BBE\\u7F6E\\uFF0C\\u56E0\\u6B64\\uFF0C\\u589E\\u5F3A\\u8272\\u7684\\u9ED1\\u8272\\u3001\\u767D\\u8272\\u751A\\u81F3\\u4E2D\\u95F4\\u8272\\u7684\\u7070\\u8272\\u6587\\u672C\\u5728 Acrylic \\u4E0A\\u663E\\u793A\\u65F6\\u90FD\\u80FD\\u6EE1\\u8DB3\\u5BF9\\u6BD4\\u7387\\u8981\\u6C42\\u3002 \\u5E73\\u53F0\\u63D0\\u4F9B\\u7684\\u4E3B\\u9898\\u8D44\\u6E90\\u7684\\u9ED8\\u8BA4\\u5BF9\\u6BD4\\u8272\\u8C03\\u4E3A 80% \\u4E0D\\u900F\\u660E\\u5EA6\\u3002 \\u5728 Acrylic \\u4E0A\\u653E\\u7F6E\\u589E\\u5F3A\\u8272\\u6B63\\u6587\\u6587\\u672C\\u65F6\\uFF0C\\u4F60\\u53EF\\u4EE5\\u5728\\u964D\\u4F4E\\u8272\\u8C03\\u4E0D\\u900F\\u660E\\u5EA6\\u7684\\u540C\\u65F6\\u4FDD\\u6301\\u53EF\\u8BFB\\u6027\\u3002 \\u5728\\u6DF1\\u8272\\u6A21\\u5F0F\\u4E0B\\uFF0C\\u8272\\u8C03\\u4E0D\\u900F\\u660E\\u5EA6\\u53EF\\u8BBE\\u4E3A 70%\\uFF0C\\u800C\\u5728\\u6D45\\u8272\\u6A21\\u5F0F\\u4E0B\\uFF0CAcrylic \\u53EF\\u6EE1\\u8DB3 50% \\u4E0D\\u900F\\u660E\\u5EA6\\u6761\\u4EF6\\u4E0B\\u7684\\u5BF9\\u6BD4\\u7387\\u8981\\u6C42\\u3002\\n\\u4E0D\\u5EFA\\u8BAE\\u5728 Acrylic \\u56FE\\u9762\\u4E0A\\u653E\\u7F6E\\u989C\\u8272\\u9C9C\\u4EAE\\u7684\\u6587\\u672C\\uFF0C\\u56E0\\u4E3A\\u8FD9\\u79CD\\u7EC4\\u5408\\u53EF\\u80FD\\u65E0\\u6CD5\\u6EE1\\u8DB3 15 \\u50CF\\u7D20\\u5B57\\u4F53\\u5927\\u5C0F\\u65F6\\u7684\\u6700\\u4F4E\\u5BF9\\u6BD4\\u7387\\u8981\\u6C42\\u3002 \\u8BF7\\u5C3D\\u91CF\\u907F\\u514D\\u5728 Acrylic \\u5143\\u7D20\\u4E0A\\u653E\\u7F6E\\u8D85\\u94FE\\u63A5\\u3002 \\u6B64\\u5916\\uFF0C\\u5982\\u679C\\u9009\\u62E9\\u81EA\\u5B9A\\u4E49\\u8BBE\\u7F6E Acrylic \\u8272\\u8C03\\u989C\\u8272\\u6216\\u4E0D\\u900F\\u660E\\u5EA6\\uFF0C\\u800C\\u4E0D\\u91C7\\u7528\\u4E3B\\u9898\\u8D44\\u6E90\\u63D0\\u4F9B\\u7684\\u5E73\\u53F0\\u9ED8\\u8BA4\\u8BBE\\u7F6E\\uFF0C\\u8BF7\\u65F6\\u523B\\u6CE8\\u610F\\u53EF\\u8BFB\\u6027\\u3002\")), mdx(\"h3\", null, \"CSS \\u4F7F\\u7528\\u9650\\u5236\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u7236\\u7EC4\\u4EF6\\u5982\\u679C\\u4F7F\\u7528 will-change: transform \\u5C5E\\u6027\\uFF0Cback-drop: blur \\u53EF\\u80FD\\u4E0D\\u4F1A\\u751F\\u6548\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"position: absolute; \\u7684\\u4E0A\\u5C42 mix-blend-mode \\u53EF\\u80FD\\u4F1A\\u628A\\u4E0B\\u5C42\\u7684 back-drop: blur \\u5C5E\\u6027\\u5931\\u6548\\u3002\")), mdx(\"h2\", null, \"\\u4E94\\u3001\\u6E90\\u7801\"), mdx(CodeWithPreview, {\n    codes: [{\n      name: 'index.css',\n      code: \".acrylic {\\n  /* size, position, etc... */\\n  position: relative;\\n  box-shadow: 0px 9px 20px #00000057;\\n  backdrop-filter: \\n      /* \\u8D1F\\u8D23\\u80CC\\u666F\\u6A21\\u7CCA */\\n      blur(30px)\\n      /* \\u8D1F\\u8D23\\u4EAE\\u5EA6\\uFF0C100 \\u4EE5\\u4E0B\\u4F1A\\u53D8\\u6697\\uFF0C\\u4EE5\\u4E0A\\u4F1A\\u63D0\\u4EAE */\\n      brightness(120%)\\n      /* \\u8D1F\\u8D23\\u989C\\u8272\\u9971\\u548C\\u5EA6\\uFF0C\\u53EF\\u4EE5\\u51CF\\u5C0F\\u6765\\u886C\\u6258\\u524D\\u666F\\uFF0C\\u907F\\u514D\\u80CC\\u666F\\u592A\\u9C9C\\u8273 */\\n      saturate(80%);\\n  /* \\u8D1F\\u8D23\\u989C\\u8272\\u53E0\\u52A0\\uFF0C\\u4E00\\u534A\\u767D\\u8272\\u3001\\u9ED1\\u8272\\u6216\\u4E3B\\u9898\\u8272\\uFF0C\\u886C\\u6258\\u524D\\u666F */\\n  background-color: #ffffff88;\\n  /* \\u8D1F\\u8D23\\u5728\\u6548\\u679C\\u4E0A\\u6DFB\\u52A0\\u566A\\u70B9\\uFF0C\\u53EF\\u4EE5\\u8425\\u9020\\u51FA\\u78E8\\u7802\\u6548\\u679C */\\n  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==);\\n  /* \\u78E8\\u7802\\u5927\\u5C0F */\\n  background-size: 50px;\\n}\"\n    }, {\n      name: 'index.html',\n      code: \"<div id=\\\"some-bg-div\\\">\\n  <div class=\\\"acrylic\\\">\\n    <!-- something -->\\n  </div>\\n</div>\"\n    }],\n    withTitle: true,\n    column: true,\n    preview: mdx(AcrylicEffect3, {\n      mdxType: \"AcrylicEffect3\"\n    }),\n    mdxType: \"CodeWithPreview\"\n  }), mdx(\"h2\", null, \"\\u516D\\u3001\\u4E9A\\u514B\\u529B\\u98CE\\u683C\\u7684\\u7EC4\\u4EF6\\u5E93(Acrylic UI Components Library)\"), mdx(\"p\", null, \"\\u518D\\u591A\\u4E00\\u70B9\\uFF0C\\u6BCF\\u7BC7\\u6587\\u7AE0\\u4E0D\\u4EC5\\u4EC5\\u5199\\u4E00\\u4E2A\\u4E1C\\u897F\\uFF0C\\u6700\\u540E\\u5982\\u679C\\u591A\\u82B1\\u4E00\\u4E9B\\u65F6\\u95F4\\u63D0\\u70BC\\u51FA\\u70B9\\u4EC0\\u4E48\\u3001\\u4EA7\\u51FA\\u4EC0\\u4E48\\uFF0C\\u90A3\\u4E48\\u6587\\u7AE0\\u4E0D\\u4EC5\\u4EC5\\u662F\\u603B\\u7ED3\\uFF0C\\u66F4\\u662F\\u80FD\\u4EA7\\u751F\\u6301\\u7EED\\u7684\\u4EF7\\u503C\\u3002\\u8FD9\\u91CC\\u5C06\\u8FD9\\u4E2A\\u4E9A\\u514B\\u529B\\u6548\\u679C\\u4E3A\\u4E3B\\u9898\\u5B9E\\u73B0\\u4E00\\u4E2A\\u7EC4\\u4EF6\\u5E93\\u3002\"), mdx(\"p\", null, \"\\u7EC4\\u4EF6\\u5E93\\u7684\\u5B9E\\u73B0\\u662F\\u5F88\\u590D\\u6742\\u7684\\uFF0C\\u4E00\\u822C\\u662F\\u56E2\\u961F\\u6C89\\u6DC0\\uFF0C\\u7EF4\\u62A4\\u66F4\\u662F\\u8017\\u65F6\\u8017\\u529B\\uFF0C\\u6539\\u8FDB\\u548C\\u6DFB\\u52A0\\u7EC4\\u4EF6\\u66F4\\u662F\\u6D77\\u91CF\\u5DE5\\u4F5C\\uFF0C\\u4F46\\u662F\\u8FD8\\u6709\\u4E00\\u4E2A\\u6BD4\\u8F83\\u8F7B\\u91CF\\u7701\\u4E8B\\u7684\\u9014\\u5F84\\uFF1A\\u505A\\u4E3B\\u9898\\u3002\"), mdx(\"p\", null, \"\\u6BD4\\u5982\\u6BD4\\u8F83\\u77E5\\u540D\\u7684 @material-ui \\u5C31\\u5305\\u542B\\u4E86\\u5F88\\u591A\\u975E\\u5E38\\u9AD8\\u8D28\\u91CF\\u7684\\u7EC4\\u4EF6\\uFF0C\\u975E\\u5E38\\u53CB\\u597D\\u3001Tree-Shaking\\u3001\\u56FE\\u6807\\u3001\\u4EA4\\u4E92\\u4F53\\u9A8C\\u3001\\u5B8C\\u6574\\u7684\\u8BBE\\u8BA1\\u89C4\\u8303\\u3001\\u5B8C\\u5584\\u7684 TypeScript \\u7684\\u652F\\u6301\\u3001\\u751A\\u81F3\\u5305\\u542B\\u65E0\\u969C\\u788D\\u7684\\u652F\\u6301\\uFF0C\\u66F4\\u91CD\\u8981\\u7684\\u662F\\u652F\\u6301\\u4E3B\\u9898\\u3002\\u8FD9\\u91CC\\u6211\\u4EEC\\u5728\\u8FD9\\u4E2A\\u7EC4\\u4EF6\\u57FA\\u7840\\u4E0A\\u505A\\u4E00\\u4E2A\\u4E3B\\u9898\\u6548\\u679C\\u3002\"), mdx(\"p\", null, \"\\u70B9\\u8FDB\\u53BB\\u67E5\\u770B\\uFF1A\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/studio/fluent-acrylic\"\n  }, \"\\u4E9A\\u514B\\u529B\\u6548\\u679C\\u7684\\u7EC4\\u4EF6\\u5E93\"), \"\\uFF0C\\u5305\\u542B\\u6309\\u94AE\\u3001\\u5F39\\u7A97\\u3001\\u83DC\\u5355\\u3001\\u8B66\\u793A\\u6761\\u3001\\u5BF9\\u8BDD\\u6846\\u7B49\\u4E9A\\u514B\\u529B\\u6548\\u679C\\u7EC4\\u4EF6\\u3002\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Menu\"), \" \\u7684\\u4F8B\\u5B50:\"), mdx(\"div\", {\n    style: {\n      width: '100%',\n      height: 200,\n      overflow: 'hidden',\n      display: 'flex'\n    }\n  }, mdx(AcrylicDemo5, {\n    mdxType: \"AcrylicDemo5\"\n  })));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"6505615e-7a9b-518c-b5c4-380c5d6add61","prev":{"fileAbsolutePath":"D:/ubug/storybook/content/blog/_drafts/2077/未来协议.md","id":"7ca52204-5de7-5721-82df-a39c38ac429b","parent":{"name":"未来协议","sourceInstanceName":"blog"},"excerpt":"…","fields":{"title":"⛓ 未来协议","slug":"/blog/future-protocol","description":"对未来互联网和生活的畅想，发挥点想象力的天马行空。","date":"2020-09-10","redirects":null,"datetime":"2020-09-10 17:26:31","categories":["code"],"series":null,"tags":["思考"],"status":"online"},"frontmatter":{"published":null,"tags":["思考"],"theme":null,"slug":"future-protocol","date":"2020-09-10 17:26:31"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"future-protocol\",\n  \"title\": \"⛓ 未来协议\",\n  \"date\": \"2020-09-10 17:26:31\",\n  \"author\": \"Ubug\",\n  \"description\": \"对未来互联网和生活的畅想，发挥点想象力的天马行空。\",\n  \"categories\": [\"code\"],\n  \"tags\": [\"思考\"]\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"hr\", null), mdx(\"p\", null, \"\\u7545\\u60F3\\u4E00\\u4E0B\\u672A\\u6765\\u4E16\\u754C\\uFF0C\\u5929\\u9A6C\\u884C\\u7A7A\\uFF0C\\u6280\\u672F\\u53D1\\u5C55\\u3002\"), mdx(\"hr\", null), mdx(\"h2\", null, \"\\u4E00\\u3001\\u8FC7\\u53BB\\u548C\\u73B0\\u5728\\u7684\\u534F\\u8BAE\\u662F\\u4EC0\\u4E48\"), mdx(\"p\", null, \"\\u534F\\u8BAE\\u662F\\u4EC0\\u4E48\\uFF0C\\u662F\\u7EA6\\u5B9A\\u7684\\u4E00\\u5957\\u89C4\\u5219\\u548C\\u534F\\u5B9A\\u3002\\u73B0\\u5728\\u6211\\u4EEC\\u7ECF\\u5E38\\u7B7E\\u7F72\\u7684\\u623F\\u5C4B\\u51FA\\u79DF\\u534F\\u8BAE\\uFF0C\\u7EA6\\u5B9A\\u623F\\u5C4B\\u5728\\u54EA\\uFF0C\\u623F\\u79DF\\u591A\\u5C11\\uFF0C\\u591A\\u957F\\u65F6\\u95F4\\u4EA4\\u4E00\\u6B21\\u623F\\u79DF\\uFF0C\\u623F\\u5C4B\\u6700\\u591A\\u4F4F\\u51E0\\u4E2A\\u4EBA\\uFF0C\\u7535\\u8D39\\u6C34\\u8D39\\u600E\\u4E48\\u4EA4\\u7B49\\u7B49\\u51FA\\u79DF\\u4EBA\\u548C\\u627F\\u79DF\\u4EBA\\u4E4B\\u95F4\\u7684\\u7EA6\\u5B9A\\u4E8B\\u9879\\u3002\"), mdx(\"p\", null, \"\\u7545\\u60F3\\u4E00\\u4E0B\\uFF0C\\u4ECE\\u53E4\\u81F3\\u4ECA\\u5404\\u79CD\\u534F\\u8BAE\\u7684\\u6982\\u5FF5\\uFF0C\\u53E4\\u65F6\\u5019\\u7528\\u8D1D\\u58F3\\u4EE3\\u66FF\\u94B1\\u5E01\\u662F\\u56E0\\u4E3A\\u7EA6\\u5B9A\\u4E86\\u8D1D\\u58F3\\u4F5C\\u4E3A\\u4EE5\\u7269\\u6613\\u7269\\u7684\\u4E2D\\u95F4\\u66FF\\u6362\\u54C1\\uFF0C\\u540E\\u6765\\u94B1\\u5E84\\u7684\\u94F6\\u7968\\u7EA6\\u5B9A\\u4E86\\u4E00\\u5F20\\u4E0D\\u597D\\u4F5C\\u5047\\u7684\\u7EB8\\u6765\\u4EE3\\u66FF\\u51E0\\u5341\\u4E0A\\u767E\\u65A4\\u7684\\u91D1\\u94F6\\uFF0C\\u8D70\\u9556\\u7684\\u7EA6\\u5B9A\\u4E00\\u5F20\\u5927\\u65D7\\u548C\\u6EE1\\u8F66\\u7BB1\\u5B50\\u8D27\\u7269\\u548C\\u73B0\\u5728\\u7684\\u96C6\\u88C5\\u7BB1\\u4E5F\\u6CA1\\u5565\\u533A\\u522B\\uFF0C\\u90FD\\u662F\\u534F\\u8BAE\\u7684\\u6807\\u51C6\\u5316\\uFF0C\\u7EDF\\u4E00\\u6807\\u51C6\\u5316\\u5C31\\u662F\\u8BA4\\u77E5\\u7684\\u7EDF\\u4E00\\u3002\"), mdx(\"p\", null, \"\\u4E66\\u540C\\u6587\\u3001\\u8F66\\u540C\\u8F68\\u7684\\u7EDF\\u4E00\\u6807\\u51C6\\u589E\\u901F\\u4E86\\u4E92\\u8054\\u4E92\\u901A\\uFF0C\\u5E26\\u6765\\u4E86\\u66F4\\u5927\\u7684\\u4EF7\\u503C\\uFF0C\\u8BA9\\u793E\\u4F1A\\u8FD0\\u8F6C\\u66F4\\u52A0\\u4FBF\\u6377\\u5FEB\\u901F\\u3002\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u73B0\\u4EE3\\u4E92\\u8054\\u7F51\\u534F\\u8BAE\\uFF1A\"), \" TCP\\u3001UDP\\u3001IP\\u3001HTTP\\u3001FTP\\u3001WS \\u7B49\\u7F51\\u7EDC\\u534F\\u8BAE\\u5C31\\u662F\\u4E00\\u4E2A\\u5F88\\u57FA\\u7840\\u7684\\u51FA\\u53D1\\u70B9\\uFF0C\\u8FD9\\u4E9B\\u6700\\u57FA\\u7840\\u7684\\u534F\\u8BAE\\u3002\\u6211\\u4EEC\\u5728\\u8FD9\\u4E9B\\u7684\\u57FA\\u7840\\u4E0A\\u642D\\u5EFA\\u4E86\\u73B0\\u4EE3\\u4E92\\u8054\\u7F51\\u3002\\u8FD9\\u4E9B\\u57FA\\u7840\\u7684\\u534F\\u8BAE\\u7ED9\\u6211\\u4EEC\\u65E0\\u7A77\\u65E0\\u5C3D\\u7684\\u60F3\\u8C61\\u529B\\uFF0C\\u8BA9\\u6211\\u4EEC\\u53EF\\u4EE5\\u7528\\u4E00\\u4E2A\\u5F88\\u4FBF\\u5B9C\\u7684\\u624B\\u673A\\u5C31\\u80FD\\u64CD\\u63A7\\u65E0\\u5C3D\\u7684\\u4FE1\\u606F\\u3002\"), mdx(\"p\", null, \"\\u672A\\u6765\\u5462\\uFF1F\\u4F1A\\u51FA\\u73B0\\u54EA\\u4E9B\\u6211\\u4EEC\\u4E0D\\u6562\\u60F3\\u8C61\\u7684\\u534F\\u8BAE\\uFF0C\\u80FD\\u8BA9\\u793E\\u4F1A\\u7FFB\\u5929\\u8986\\u5730\\u3002\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u534F\\u8BAE\\u6F14\\u8FDB\\u89C4\\u5F8B\"), \"\\uFF1A\\u4ECE\\u8D1D\\u58F3\\u5230\\u94F6\\u7968\\uFF0C\\u4ECE\\u7EB8\\u8D28\\u5408\\u540C\\u5230\\u7535\\u5B50\\u534F\\u8BAE\\uFF0C\\u4EBA\\u7C7B\\u793E\\u4F1A\\u7684\\u534F\\u8BAE\\u4E00\\u76F4\\u5728\\u5411\\u7740\\u66F4\\u9AD8\\u6548\\u3001\\u66F4\\u6807\\u51C6\\u3001\\u66F4\\u81EA\\u52A8\\u5316\\u7684\\u65B9\\u5411\\u53D1\\u5C55\\u3002\\u6BCF\\u4E00\\u6B21\\u534F\\u8BAE\\u7684\\u9769\\u65B0\\u90FD\\u5E26\\u6765\\u751F\\u4EA7\\u529B\\u7684\\u5DE8\\u5927\\u63D0\\u5347\\u3002\\u672A\\u6765\\u534F\\u8BAE\\u7684\\u53D1\\u5C55\\u5C06\\u4E0D\\u4EC5\\u4EC5\\u662F\\u6280\\u672F\\u5C42\\u9762\\u7684\\u8FDB\\u6B65\\uFF0C\\u66F4\\u662F\\u793E\\u4F1A\\u7EC4\\u7EC7\\u65B9\\u5F0F\\u7684\\u9769\\u547D\\u6027\\u53D8\\u5316\\u3002\"), mdx(\"h2\", null, \"\\u4E8C\\u3001\\u672A\\u6765\"), mdx(\"p\", null, \"\\u5F00\\u59CB\\u7545\\u60F3\\u65F6\\u95F4\\uFF0C\\u56E0\\u4E3A\\u8111\\u5BB9\\u91CF\\u6709\\u9650\\uFF0C\\u6240\\u4EE5\\u53EA\\u80FD\\u7528\\u5F88\\u591A\\u73B0\\u5728\\u7684\\u5F88\\u591A\\u6982\\u5FF5\\u6765\\u7C7B\\u6BD4\\uFF0C\\u91CD\\u70B9\\u4E5F\\u662F\\u805A\\u7126\\u5728\\u4EBA\\u8EAB\\u4E0A\\u3002\"), mdx(\"p\", null, \"\\u4E0D\\u50CF\\u8D5B\\u535A\\u670B\\u514B\\u90A3\\u6837\\u5404\\u79CD\\u4E49\\u80A2\\u7684\\u5B58\\u5728\\uFF0C\\u8FD9\\u91CC\\u4EC5\\u4EC5\\u63A2\\u8BA8\\u8F6F\\u4EF6\\u548C\\u786C\\u4EF6\\u5C42\\u9762\\uFF0C\\u5927\\u8303\\u56F4\\u7684\\u5411\\u5B8C\\u7F8E\\u4EBA\\u5DE5\\u667A\\u80FD\\u548C\\u673A\\u5668\\u4EBA\\u8FDB\\u5316\\u7684\\u8DEF\\u7EBF\\u6709\\u70B9\\u592A\\u8FDC\\u4E86\\uFF0C\\u4EBA\\u7684\\u610F\\u4E49\\u8FD8\\u662F\\u5728\\u4E8E\\u4EBA\\uFF0C\\u53EA\\u662F\\u591A\\u4E86\\u70B9\\u4FE1\\u606F\\u8F93\\u5165\\u8F93\\u51FA\\u3002\"), mdx(\"h3\", null, \"2.1 \\u672A\\u6765\\u7684\\u57FA\\u7840\\u8BBE\\u65BD\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u7B97\\u529B\\u8D44\\u6E90\")), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u4E3A\\u4E86\\u4EA7\\u51FA\\u6700\\u5927\\u5316\\uFF0C\\u7B97\\u529B\\u7684\\u751F\\u4EA7\\u4F1A\\u662F\\u4E00\\u4E2A\\u5927\\u751F\\u610F\\uFF0C\\u7C7B\\u4F3C\\u73B0\\u5728\\u7684\\u7535\\u529B\\u516C\\u53F8\\u91C7\\u8D2D\\u7164\\u70AD\\u7528\\u53D1\\u7535\\u673A\\u751F\\u4EA7\\u7535\\u529B\\uFF0C\\u4EE5\\u540E\\u7684\\u9AD8\\u79D1\\u6280\\u516C\\u53F8\\u4F1A\\u91C7\\u8D2D\\u7535\\u529B\\uFF08\\u57FA\\u7840\\u7684\\u539F\\u6599\\uFF09\\u7528\\u670D\\u52A1\\u5668\\uFF08\\u5DE5\\u5177\\uFF09\\u8FD0\\u884C\\u7A0B\\u5E8F\\uFF08\\u6D41\\u6C34\\u7EBF\\uFF09\\u751F\\u4EA7\\u7B97\\u529B\\u51FA\\u552E\\u3002\\u90E8\\u5206\\u9AD8\\u79D1\\u6280\\u516C\\u53F8\\u8FD8\\u53EF\\u4EE5\\u6839\\u636E\\u57FA\\u7840\\u7B97\\u529B\\u516C\\u53F8\\u63D0\\u4F9B\\u57FA\\u7840\\u7684SDK\\uFF0C\\u751F\\u4EA7\\u66F4\\u4E0A\\u5C42\\u7684\\u7B97\\u529B\\u670D\\u52A1\\uFF0C\\u6BD4\\u5982\\u4E2A\\u6027\\u5316\\u8D44\\u8BAF\\u8BA2\\u9605\\uFF0C\\u667A\\u80FD\\u5316\\u6536\\u96C6\\u5168\\u7403\\u8D44\\u8BAF\\uFF0C\\u4E2A\\u6027\\u5316\\u5904\\u7406\\u540E\\u63D0\\u4F9B\\u7ED9\\u6D88\\u8D39\\u8005\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u7B97\\u529B\\u4F7F\\u7528\\u4E00\\u5B9A\\u4F1A\\u88AB\\u5236\\u4F5C\\u6210\\u901A\\u7528\\u6027\\u7684\\u6807\\u51C6\\u89C4\\u8303\\uFF0C\\u80FD\\u591F\\u5229\\u7528\\u9AD8\\u901F\\u4E92\\u8054\\u7684\\u4E92\\u8054\\u7F51\\u8FDB\\u884C\\u4F20\\u8F93\\uFF0C\\u901A\\u8FC7\\u5143\\u6570\\u636E\\u548C\\u5904\\u7406\\u80FD\\u529B\\u5C31\\u80FD\\u62FC\\u5408\\u6210\\u9AD8\\u7EA7\\u7B97\\u529B\\u903B\\u8F91\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u751F\\u4EA7\\u7B97\\u529B\\u7684\\u516C\\u53F8\\u4F1A\\u8D1F\\u8D23\\u9001\\u7B97\\u5165\\u6237\\uFF0C\\u5728\\u4E92\\u8054\\u7F51\\u94FE\\u8DEF\\u4E0AOTT\\uFF0C\\u7B97\\u529B\\u8D44\\u6E90\\u5F88\\u5BB9\\u6613\\u90E8\\u7F72\\u4F7F\\u7528\\uFF0C\\u6BCF\\u4E2A\\u4EBA\\u6216\\u8005\\u5BB6\\u5EAD\\u5F88\\u5BB9\\u6613\\u63A5\\u5165\\u7B97\\u529B\\uFF0C\\u7B97\\u529B\\u8D44\\u6E90\\u548C\\u670D\\u52A1\\u66F4\\u901A\\u7528\\uFF0C\\u4E5F\\u66F4\\u5BB9\\u6613\\u88AB\\u66FF\\u6362\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u8FD9\\u4E9B\\u7B97\\u529B\\u7684\\u63A5\\u5165\\u4F1A\\u88AB\\u6253\\u5305\\u6210\\u5957\\u9910\\uFF0C\\u6210\\u4E3A\\u6BCF\\u4E2A\\u4EBA\\u7684\\u751F\\u6D3B\\u6210\\u672C\")), mdx(\"p\", null, \"\\u4EE5\\u4E0A\\u7684\\u7B97\\u529B\\u4F7F\\u7528\\u6D41\\u7A0B\\u662F\\u6734\\u7D20\\u601D\\u60F3\\u4E0B\\u7684\\u8DEF\\u5F84\\uFF0C\\u4F46\\u662F\\u6BCF\\u4E2A\\u73AF\\u8282\\u90FD\\u53EF\\u80FD\\u4EE5\\u53E6\\u4E00\\u79CD\\u5F62\\u5F0F\\u51FA\\u73B0\\u3002\\u6BD4\\u5982\\u641C\\u7D22\\u5F15\\u64CE\\u516C\\u53F8\\u4F1A\\u63D0\\u4F9B\\u5728\\u7EBF\\u641C\\u7D22\\u670D\\u52A1\\uFF0C\\u7528\\u6237\\u63D0\\u4F9B\\u641C\\u7D22\\u8BCD\\uFF0C\\u8FD4\\u56DE\\u641C\\u7D22\\u7ED3\\u679C\\u5C31\\u662F\\u4E00\\u4E2A\\u7B97\\u529B\\u7684\\u6D88\\u8D39\\u548C\\u4F7F\\u7528\\uFF0C\\u7528\\u6237\\u82B1\\u8D39\\u7684\\u662F\\u3010\\u770B\\u5E7F\\u544A\\u3011\\u5F97\\u5230\\u7684\\u662F\\u3010\\u641C\\u7D22\\u7ED3\\u679C\\u9875\\u3011\\u3002\\u7528\\u6237\\u9009\\u62E9\\u641C\\u7D22\\u5F15\\u64CE\\u7684\\u8FC7\\u7A0B\\u5C31\\u662F\\u63A5\\u5165\\u4E0D\\u540C\\u7684\\u7B97\\u529B\\u63D0\\u4F9B\\u5546\\u3002\\u4ECE\\u8FD9\\u4E2A\\u89D2\\u5EA6\\u6765\\u770B\\uFF0C\\u7B97\\u529B\\u5DF2\\u7ECF\\u7B97\\u662F\\u6211\\u4EEC\\u751F\\u6D3B\\u4E2D\\u7684\\u57FA\\u7840\\u539F\\u751F\\u8D44\\u6E90\\u4E86\\u3002\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u66F4\\u591A\\u4E2A\\u4EBA\\u4FE1\\u606F\\u88AB\\u91CF\\u5316\\uFF0C\\u7136\\u540E\\u6807\\u51C6\\u5316\")), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u4E2A\\u4EBA\\u4FE1\\u606F\\u7684\\u91CF\\u5316\\u66F4\\u52A0\\u5168\\u9762\\uFF0C\\u4E0D\\u4EC5\\u4EC5\\u662F\\u81EA\\u5DF1\\u7684\\u7F51\\u4E0A\\u4FE1\\u606F\\uFF0C\\u5305\\u62EC\\u81EA\\u5DF1\\u7684\\u4E2A\\u4EBA\\u5C5E\\u6027\\u548C\\u6570\\u636E\\uFF0C\\u50AC\\u751F\\u51FA\\u6570\\u5B57\\u5B6A\\u751F\\u6982\\u5FF5\\u3002\\u6BD4\\u5982\\u5174\\u8DA3\\u7231\\u597D\\u3001\\u6700\\u8FD1\\u7684\\u7F51\\u4E0A\\u884C\\u4E3A\\u3001\\u8EAB\\u4F53\\u6570\\u636E\\u3001\\u4F4D\\u7F6E\\u8F68\\u8FF9\\u3001\\u73AF\\u5883\\u4FE1\\u606F\\u3001\\u770B\\u5230\\u542C\\u5230\\u7684\\u4FE1\\u606F\\u3001\\u5DE5\\u4F5C\\u5F85\\u529E\\u548C\\u4F1A\\u8BAE\\u90AE\\u4EF6\\u3001\\u548C\\u4ED6\\u4EBA\\u7684\\u4EA4\\u4E92\\u6570\\u636E\\u7B49\\u7B49\\u3002\\u8FD9\\u4E9B\\u90FD\\u80FD\\u591F\\u88AB\\u5B58\\u50A8\\u5728\\u4E2A\\u4EBA\\u670D\\u52A1\\u5668\\u4E2D\\uFF0C\\u4F5C\\u4E3A\\u7B97\\u6CD5\\u8F93\\u5165\\u53C2\\u4E0E\\u5404\\u79CD\\u8BA1\\u7B97\\u670D\\u52A1\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u8FD9\\u4E9B\\u6570\\u636E\\u88AB\\u6807\\u51C6\\u5316\\uFF0C\\u6709\\u66F4\\u591A\\u7684\\u534F\\u8BAE\\u548C\\u89C4\\u8303\\u5B9A\\u4E49\\u8FD9\\u4E9B\\u6570\\u636E\\u7684\\u6536\\u96C6\\u548C\\u5B58\\u50A8\\uFF0C\\u5E76\\u4E14\\u652F\\u6301\\u8FD9\\u4E9B\\u6570\\u636E\\u7684\\u9274\\u6743\\u3001\\u52A0\\u5BC6\\u3001\\u8F93\\u5165\\u8F93\\u51FA\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u7528\\u6237\\u7684\\u6388\\u6743\\u66F4\\u4FBF\\u6377\\u5FEB\\u901F\\uFF0C\\u7528\\u6237\\u5728\\u5C06\\u81EA\\u5DF1\\u7684\\u4E2A\\u4EBA\\u6570\\u636E\\u63D0\\u4F9B\\u5230\\u5916\\u90E8\\u8BA1\\u7B97\\u670D\\u52A1\\u65F6\\uFF0C\\u53EF\\u4EE5\\u968F\\u5FC3\\u6240\\u6B32\\u7684\\u63A7\\u5236\\u6388\\u6743\\u8303\\u56F4\\u548C\\u5185\\u5BB9\\u7C92\\u5EA6\\uFF0C\\u8FD9\\u4E2A\\u5728\\u4E2A\\u4EBA\\u4FE1\\u606F\\u6570\\u636E\\u5316\\u7684\\u65F6\\u5019\\u5C31\\u8003\\u8651\\u5230\\u7684\\u901A\\u7528\\u6027\\u3002\")), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u7AEF\\u7684\\u90E8\\u5206\\u65E0\\u9650\\u60F3\\u8C61\")), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u53EF\\u80FD\\u5DF2\\u7ECF\\u6446\\u8131\\u4E86PC\\u548C\\u624B\\u673A\\u8FD9\\u79CD\\u8F93\\u5165\\u8F93\\u51FA\\u8BBE\\u5907\\uFF0C\\u76F4\\u63A5\\u667A\\u80FD\\u773C\\u955C\\u751A\\u81F3\\u4E8E\\u89C6\\u7F51\\u819C\\u5D4C\\u5165\\uFF0C\\u4E43\\u81F3\\u4E8E\\u8111\\u673A\\u63A5\\u53E3\\u5728\\u8FD9\\u4E2A\\u9636\\u6BB5\\u90FD\\u6709\\u5F88\\u5927\\u7684\\u7814\\u53D1\\u9A71\\u52A8\\u529B\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u4E2A\\u4EBA\\u4FE1\\u606F\\u7684\\u83B7\\u53D6\\u53EF\\u80FD\\u4E0D\\u90A3\\u4E48\\u4F9D\\u8D56\\u4E8E\\u4E2A\\u4EBA\\u5668\\u5B98\\u4E86\\uFF0C\\u76F4\\u63A5\\u4ECE\\u89C6\\u7F51\\u819C\\u6216\\u8005\\u8111\\u673A\\u90E8\\u5206\\u4ECB\\u5165\\u4F60\\u63A5\\u6536\\u5230\\u7684\\u4FE1\\u606F\\uFF0C\\u770B\\u5230\\u7684\\u6574\\u4E2A\\u4E16\\u754C\\u53EF\\u4EE5\\u88AB\\u7F8E\\u989C\\uFF0C\\u62C9\\u9ED1\\u7684\\u5176\\u4ED6\\u4EBA\\u53EF\\u4EE5\\u76F4\\u63A5\\u4ECE\\u89C6\\u89C9\\u4E0A\\u88AB\\u5C4F\\u853D\\uFF0C\\u80FD\\u591F\\u5728\\u5608\\u6742\\u7684\\u73AF\\u5883\\u4E2D\\u542C\\u5230\\u5F88\\u8FDC\\u7684\\u58F0\\u97F3\\uFF0C\\u80FD\\u591F\\u81EA\\u52A8\\u653E\\u5927\\u8FDC\\u5904\\u7684\\u4E1C\\u897F\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u6905\\u5B50\\u63A5\\u5165\\u667A\\u80FD\\u53EF\\u4EE5\\u6839\\u636E\\u8EAB\\u4F53\\u72B6\\u51B5\\u3001\\u808C\\u8089\\u72B6\\u6001\\u548C\\u5DE5\\u4F5C\\u4FE1\\u606F\\u81EA\\u52A8\\u8C03\\u6574\\u59FF\\u52BF\\u3002\\u6C34\\u676F\\u53EF\\u4EE5\\u6839\\u636E\\u81EA\\u5DF1\\u7684\\u559C\\u597D\\u548C\\u73AF\\u5883\\u6E29\\u5EA6\\u81EA\\u52A8\\u8C03\\u6574\\u6C34\\u6E29\\u3002\\u97F3\\u4E50\\u5DF2\\u7ECF\\u53EF\\u4EE5\\u6839\\u636E\\u81EA\\u5DF1\\u7684\\u5FC3\\u60C5\\u548C\\u5DE5\\u4F5C\\u72B6\\u6001\\u81EA\\u52A8\\u751F\\u6210\\u4E86\\u3002\")), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u6CA1\\u6709\\u4E86\\u4E0D\\u517C\\u5BB9\\u4E00\\u8BF4\")), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u5F88\\u591A\\u516C\\u53F8\\u4E3A\\u4E86\\u80FD\\u591F\\u63D0\\u4F9B\\u6807\\u51C6\\u5316\\u7684\\u670D\\u52A1\\uFF0C\\u4F1A\\u5F00\\u53D1\\u66F4\\u52A0\\u7B26\\u5408\\u672A\\u6765\\u901A\\u7528\\u7684\\u751F\\u6D3B\\u534F\\u8BAE\\u3002\\u6BD4\\u5982\\u89C6\\u89C9\\u670D\\u52A1\\u5C31\\u50CF\\u73B0\\u5728\\u7684HDMI\\u63A5\\u53E3\\u4E00\\u6837\\uFF0C\\u4E3B\\u673A\\u548C\\u663E\\u793A\\u5668\\u90FD\\u53EF\\u4EE5\\u968F\\u4FBF\\u5347\\u7EA7\\uFF0C\\u786C\\u4EF6\\u8BBE\\u5907\\u7684\\u901A\\u7528\\u6027\\u548C\\u53EF\\u66FF\\u6362\\u6027\\u66F4\\u5F3A\\u4E86\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u5C31\\u7B97\\u6709\\u4E0D\\u517C\\u5BB9\\u7684\\u63A5\\u53E3\\uFF0C\\u4E5F\\u53EF\\u4EE5\\u901A\\u8FC7\\u667A\\u80FD\\u8F6C\\u6362\\u6765\\u8FDB\\u884C\\u53C2\\u6570\\u8C03\\u6574\\uFF0C\\u6240\\u4EE5\\u5404\\u4E2A\\u4EBA\\u5DE5\\u667A\\u80FD\\u8F6F\\u4EF6\\u670D\\u52A1\\u548C\\u786C\\u4EF6\\u8BBE\\u5907\\u90FD\\u53EF\\u4EE5\\u901A\\u8FC7\\u5404\\u79CD\\u81EA\\u52A8\\u534F\\u8BAE\\u53D1\\u73B0\\u548C\\u8F6C\\u6362\\u903B\\u8F91\\u8FDB\\u884C\\u517C\\u5BB9\\u3002\\uFF08\\u73B0\\u5728\\u5DF2\\u7ECF\\u6709\\u516C\\u53F8\\u5728\\u63A2\\u7D22\\u5927\\u6570\\u636E\\u6A21\\u578B\\u4F7F\\u7528AI\\u8F93\\u51FA\\u786C\\u4EF6\\u8BBE\\u5907\\u63A7\\u5236\\u4FE1\\u53F7\\u4E86\\uFF09\\u6BD4\\u5982\\u667A\\u80FD\\u626B\\u5730\\u673A\\u7684\\u786C\\u4EF6\\u5C31\\u7B97\\u662F\\u79C1\\u6709\\u534F\\u8BAE\\uFF0C\\u4E5F\\u53EF\\u4EE5\\u901A\\u8FC7\\u4EBA\\u5DE5\\u667A\\u80FD\\u8FDB\\u884C\\u534F\\u8BAE\\u8F6C\\u6362\\uFF0C\\u80FD\\u591F\\u5F3A\\u884C\\u5C06\\u67D0\\u4E2A\\u79C1\\u6709\\u534F\\u8BAE\\u7684\\u907F\\u969C\\u7CFB\\u7EDF\\u3001\\u884C\\u8D70\\u7CFB\\u7EDF\\u3001\\u6E05\\u626B\\u7CFB\\u7EDF\\u7B49\\u786C\\u4EF6\\u534F\\u8BAE\\uFF0C\\u901A\\u8FC7\\u4E00\\u4E2A\\u9002\\u914D\\u7B97\\u6CD5\\uFF0C\\u5D4C\\u5957\\u4E0A\\u53E6\\u4E00\\u4E2A\\u516C\\u53F8\\u66F4\\u52A0\\u4E2A\\u6027\\u5316\\u7684\\u9AD8\\u7EA7\\u667A\\u80FD\\u626B\\u5730\\u7A0B\\u5E8F\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u56E0\\u4E3A\\u8F6F\\u786C\\u4EF6\\u7684\\u9002\\u914D\\u548C\\u8F6C\\u6362\\u4EE3\\u4EF7\\u5C0F\\u4E86\\uFF0C\\u6240\\u4EE5\\u4E00\\u5B9A\\u7A0B\\u5EA6\\u4E0A\\u901A\\u7528\\u6027\\u66F4\\u9AD8\\u4E86\\u3002\")), mdx(\"p\", null, \"\\u4EE5\\u4E0A\\u90A3\\u4E48\\u591A\\u8BBE\\u5B9A\\u90FD\\u662F\\u5728\\u8BB2\\u672A\\u6765\\u534F\\u8BAE\\u7684\\u901A\\u7528\\u6027\\uFF0C\\u6570\\u636E\\u7684\\u6D41\\u8F6C\\u548C\\u8F93\\u5165\\u8F93\\u51FA\\u7684\\u63A5\\u5165\\u90FD\\u66F4\\u53EF\\u884C\\u3002\"), mdx(\"h3\", null, \"2.2 \\u672A\\u6765\\u7684\\u751F\\u6001\"), mdx(\"h4\", null, \"\\u7528\\u6237\\u4E2A\\u4EBA\\u4FE1\\u606F\\u670D\\u52A1\\u516C\\u53F8\"), mdx(\"p\", null, \"\\u8D1F\\u8D23\\u91C7\\u96C6\\u548C\\u7BA1\\u7406\\u7528\\u6237\\u7684\\u4E2A\\u4EBA\\u4FE1\\u606F\\uFF0C\\u8BA9\\u7528\\u6237\\u81EA\\u5DF1\\u80FD\\u591F\\u67E5\\u770B\\u3001\\u7BA1\\u7406\\u548C\\u4F7F\\u7528\\u81EA\\u5DF1\\u7684\\u79C1\\u4EBA\\u6570\\u636E\\uFF0C\\u53EF\\u4EE5\\u770B\\u4F5C\\u4E2A\\u4EBA\\u5168\\u91CF\\u5F55\\u5236\\u670D\\u52A1\\uFF0C\\u6216\\u8005\\u6570\\u5B57\\u5B6A\\u751F\\u540C\\u6B65\\u5DE5\\u5177\\uFF0C\\u4E0D\\u8FC7\\u5BE1\\u5934\\u5927\\u516C\\u53F8\\u53EF\\u4E0D\\u613F\\u610F\\u8BA9\\u8FD9\\u79CD\\u6570\\u636E\\u767D\\u767D\\u6D41\\u5931\\uFF0C\\u6240\\u4EE5\\u80AF\\u5B9A\\u4F1A\\u5728\\u5404\\u79CD\\u5C42\\u9762\\u6536\\u96C6\\u4F60\\u7684\\u559C\\u597D\\u3001\\u804A\\u5929\\u3001\\u5DE5\\u4F5C\\u8DEF\\u5F84\\u7B49\\u4FE1\\u606F\\uFF0C\\u7136\\u540E\\u901A\\u8FC7\\u5927\\u6570\\u636E\\u5206\\u6790\\uFF0C\\u6BD4\\u4F60\\u81EA\\u5DF1\\u66F4\\u4E86\\u89E3\\u4F60\\u81EA\\u5DF1\\u3002\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u63D0\\u4F9B\\u6807\\u51C6\\u5316\\u7684\\u786C\\u4EF6\\u8BBE\\u5907\\uFF1A\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u6807\\u51C6\\u8F93\\u5165\\u8F93\\u51FA\\u8BBE\\u5907\\uFF1A\\u89C6\\u7F51\\u819C\\u5C4F\\u5E55\\u3001\\u5D4C\\u5165\\u5F0F\\u8033\\u673A\\u3001\\u5473\\u89C9\\u55C5\\u89C9\\u63A7\\u5236\\u5668\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u4FE1\\u606F\\u91C7\\u96C6\\u8BBE\\u5907\\uFF1A\\u5168\\u8EAB\\u6444\\u50CF\\u5934\\u548C\\u9EA6\\u514B\\u98CE\\u3001\\u73AF\\u5883\\u4F20\\u611F\\u5668\\u3001\\u5D4C\\u5165\\u5F0F\\u8EAB\\u4F53\\u6307\\u6807\\u4F20\\u611F\\u5668\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u6570\\u636E\\u91C7\\u96C6\\u8BBE\\u5907\\u6216\\u670D\\u52A1\\uFF1A\\u90AE\\u7BB1\\u3001\\u793E\\u4EA4\\u8F6F\\u4EF6\\u3001\\u5373\\u65F6\\u901A\\u8BAF\\u3001\\u5DE5\\u4F5C\\u8BB0\\u5F55\\u7B49\\u7B49\\u8BB0\\u5F55\\u8F6F\\u4EF6\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u6301\\u7EED\\u6216\\u8005\\u5468\\u671F\\u6027\\u7684\\u4E0A\\u62A5\\u5230\\u79C1\\u4EBA\\u670D\\u52A1\\u5668\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u63D0\\u4F9B\\u6570\\u636E\\u5B58\\u50A8\\u670D\\u52A1\\uFF1A\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u4E2A\\u4EBA\\u4FE1\\u606F\\u7684\\u6D41\\u5F0F\\u4F20\\u8F93\\u548C\\u6C38\\u4E45\\u5B58\\u50A8\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u591A\\u7AEF\\u81EA\\u52A8\\u517C\\u5BB9\\u7684\\u6570\\u636E\\u5B58\\u53D6\\u670D\\u52A1\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u4E25\\u683C\\u7684\\u6570\\u636E\\u52A0\\u5BC6\\u670D\\u52A1\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u63D0\\u4F9B\\u6570\\u636E\\u6388\\u6743\\u670D\\u52A1\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u7528\\u6237\\u53EF\\u4EE5\\u6388\\u6743\\u54EA\\u4E9B\\u6570\\u636E\\u53EF\\u4EE5\\u88AB\\u54EA\\u4E9B\\u5916\\u90E8\\u8BBF\\u95EE\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u7528\\u6237\\u53EF\\u4EE5\\u6388\\u6743\\u54EA\\u4E9B\\u4E2A\\u4EBA\\u8BBE\\u5907\\u53EF\\u4EE5\\u88AB\\u5916\\u90E8\\u8F93\\u51FA\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u4E25\\u683C\\u7684\\u6570\\u636E\\u5B58\\u53D6\\u65E5\\u5FD7\\u670D\\u52A1\")), mdx(\"h4\", null, \"\\u672A\\u6765\\u793E\\u4EA4\\u516C\\u53F8\"), mdx(\"p\", null, \"\\u7528\\u6237\\u6388\\u6743\\u6570\\u636E\\u91C7\\u96C6\\u548C\\u8BBE\\u5907\\u4EA4\\u4E92\\u80FD\\u529B\\uFF0C\\u5C06\\u672A\\u6765\\u6700\\u57FA\\u672C\\u7684\\u793E\\u4EA4\\u5B9E\\u73B0\\u4E3A\\u5168\\u91CF\\u6570\\u5B57\\u5316\\u7684\\u670D\\u52A1\\u3002\"), mdx(\"p\", null, \"\\u672A\\u6765\\u7684\\u793E\\u4EA4\\u5C06\\u7A81\\u7834\\u65F6\\u7A7A\\u9650\\u5236\\uFF0C\\u5B9E\\u73B0\\u771F\\u6B63\\u610F\\u4E49\\u4E0A\\u7684\\\"\\u5728\\u573A\\\"\\u3002\\u901A\\u8FC7\\u5168\\u606F\\u6295\\u5F71\\u6216\\u773C\\u955C\\u89C6\\u89C9\\u7684\\u6C89\\u6D78\\u5F0F\\u4F53\\u9A8C\\uFF0C\\u5373\\u4F7F\\u76F8\\u9694\\u4E07\\u91CC\\u4E5F\\u80FD\\u611F\\u53D7\\u5230\\u5BF9\\u65B9\\u7684\\u771F\\u5B9E\\u5B58\\u5728\\u3002\\u4F46\\u66F4\\u91CD\\u8981\\u7684\\u662F\\uFF0C\\u6280\\u672F\\u5E94\\u8BE5\\u589E\\u5F3A\\u800C\\u975E\\u66FF\\u4EE3\\u771F\\u5B9E\\u7684\\u60C5\\u611F\\u8FDE\\u63A5\\u3002\\u793E\\u4EA4\\u7684\\u6838\\u5FC3\\u662F\\u4EBA\\u4E0E\\u4EBA\\u4E4B\\u95F4\\u7684\\u60C5\\u611F\\u4EA4\\u6D41\\uFF0C\\u800C\\u975E\\u4FE1\\u606F\\u7684\\u7B80\\u5355\\u4F20\\u9012\\u3002\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u6BCF\\u5929\\u548C\\u54EA\\u4E9B\\u4EBA\\u89C1\\u9762\\uFF0C\\u8BF4\\u7684\\u54EA\\u4E9B\\u8BDD\\uFF0C\\u8C08\\u8BBA\\u7684\\u5177\\u4F53\\u4E8B\\u60C5\\u90FD\\u4F1A\\u88AB\\u5F55\\u5236\\u5E76\\u88AB\\u5206\\u6790\\uFF0C\\u7136\\u540E\\u8F93\\u51FA\\u7ED3\\u6784\\u5316\\u6570\\u636E\\u4EE5\\u4F9B\\u5F52\\u6863\\u67E5\\u8BE2\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u4E2A\\u4EBA\\u901A\\u8BAF\\u5F55\\u7684\\u4F7F\\u7528\\u66F4\\u52A0\\u4FBF\\u6377\\uFF0C\\u76F4\\u63A5\\u901A\\u8FC7\\u89C6\\u7F51\\u819C\\u5C4F\\u5E55\\u548C\\u5168\\u8EAB\\u6444\\u50CF\\u5934\\u548C\\u9EA6\\u514B\\u98CE\\u8FDB\\u884C\\u5B9E\\u666F\\u901A\\u8BDD\\uFF0C\\u7FA4\\u7EC4\\u4F1A\\u8BAE\\u5BA4\\u53EF\\u4EE5\\u66F4\\u52A0\\u8EAB\\u4E34\\u5176\\u5883\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u793E\\u4EA4\\u4FE1\\u606F\\u88AB\\u81EA\\u52A8\\u5F52\\u6863\\u5E76\\u52A0\\u5165\\u4E2A\\u4EBA\\u8BA1\\u5212\\uFF0C\\u6BD4\\u5982\\u5468\\u672B\\u91C7\\u8D2D\\u8BA1\\u5212\\u4F1A\\u81EA\\u52A8\\u8C03\\u7528\\u5206\\u6790\\u4E00\\u5468\\u5185\\u548C\\u5BB6\\u4EBA\\u804A\\u5929\\u4FE1\\u606F\\u4E2D\\u7684\\u91C7\\u8D2D\\u4FE1\\u606F\\uFF0C\\u5F97\\u51FA\\u9700\\u8981\\u91C7\\u4E70\\u4EC0\\u4E48\\u4E2A\\u6027\\u5316\\u7684\\u4E1C\\u897F\\u3002\\u6BD4\\u5982\\u548C\\u597D\\u53CB\\u7684\\u51FA\\u884C\\u8BA1\\u5212\\u4F1A\\u5728\\u4E00\\u9635\\u8BA8\\u8BBA\\u540E\\u81EA\\u52A8\\u6574\\u7406\\u51FA\\u7CBE\\u786E\\u5230\\u5C0F\\u65F6\\u7684\\u65C5\\u6E38\\u89C4\\u5212\\u5E76\\u540C\\u6B65\\u7ED9\\u6BCF\\u4E2A\\u4EBA\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u4E2A\\u4EBA\\u60F3\\u8981\\u5206\\u4EAB\\u7684\\u5FC3\\u60C5\\u548C\\u56FE\\u7247\\u4F1A\\u81EA\\u52A8\\u6574\\u7406\\u5185\\u5BB9\\uFF0C\\u751F\\u6210\\u4FE1\\u606F\\u6D41\\u540C\\u6B65\\u7ED9\\u81EA\\u5DF1\\u7684\\u597D\\u53CB\\u5708\\u5B50\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u597D\\u53CB\\u5708\\u7684\\u793E\\u4EA4\\u4FE1\\u606F\\u6D41\\u53EF\\u4EE5\\u6BCF\\u65E5\\u81EA\\u52A8\\u5206\\u6790\\u5E76\\u6309\\u4EBA\\u6574\\u7406\\u51FA\\u9700\\u8981\\u540C\\u6B65\\u77E5\\u6653\\u7684\\u6709\\u6548\\u4FE1\\u606F\")), mdx(\"h4\", null, \"\\u672A\\u6765\\u751F\\u6D3B\\u52A9\\u624B\\u516C\\u53F8\"), mdx(\"p\", null, \"\\u7528\\u6237\\u6388\\u6743\\u4E2A\\u4EBA\\u4FE1\\u606F\\uFF0C\\u901A\\u8FC7\\u7B97\\u529B\\u548C\\u667A\\u80FD\\u7B97\\u6CD5\\u4ECB\\u5165\\u5230\\u81EA\\u5DF1\\u7684\\u751F\\u6D3B\\u7BA1\\u7406\\u4E2D\\uFF0C\\u63D0\\u4F9B\\u771F\\u4E2A\\u6027\\u5316\\u670D\\u52A1\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u7528\\u6237\\u6388\\u6743\\u4E2A\\u4EBA\\u6570\\u636E\\uFF1A\\u8EAB\\u4F53\\u6570\\u636E\\u3001\\u793E\\u4EA4\\u6570\\u636E\\u3001\\u5404\\u79CD\\u4F20\\u611F\\u5668\\u6570\\u636E\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u66F4\\u52A0\\u667A\\u80FD\\u5316\\u7684\\u751F\\u6D3B\\u670D\\u52A1\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u667A\\u80FD\\u5BB6\\u5C45\\uFF1A\\u80FD\\u591F\\u6839\\u636E\\u8EAB\\u4F53\\u72B6\\u51B5\\u3001\\u73AF\\u5883\\u6570\\u636E\\u3001\\u4E2A\\u4EBA\\u559C\\u597D\\uFF0C\\u667A\\u80FD\\u8C03\\u6574\\u6BCF\\u4E2A\\u623F\\u95F4\\u6E29\\u6E7F\\u5EA6\\u3001\\u706F\\u5149\\u3001\\u5750\\u59FF\\u3001\\u6D74\\u5BA4\\u6C34\\u6E29\\u7B49\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u751F\\u6D3B\\u670D\\u52A1\\uFF1A\\u8EAB\\u4F53\\u6307\\u6807\\u6C47\\u603B\\u548C\\u5065\\u5EB7\\u5EFA\\u8BAE\\u3001\\u6BCF\\u65E5\\u4E2A\\u6027\\u5316\\u98DF\\u8C31\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u8F85\\u52A9\\u751F\\u6D3B\\u670D\\u52A1\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u60F3\\u8981\\u505A\\u996D\\uFF0C\\u670D\\u52A1\\u4F1A\\u6839\\u636E\\u51B0\\u7BB1\\u7684\\u83DC\\u548C\\u5065\\u5EB7\\u63A8\\u8350\\u81EA\\u52A8\\u751F\\u6210\\u83DC\\u8C31\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u60F3\\u8981\\u65C5\\u884C\\uFF0C\\u670D\\u52A1\\u4F1A\\u6839\\u636E\\u5047\\u671F\\u548C\\u9884\\u7B97\\u81EA\\u52A8\\u751F\\u6210\\u65C5\\u884C\\u8BA1\\u5212\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u5468\\u672B\\u4E0D\\u77E5\\u9053\\u600E\\u4E48\\u8FC7\\uFF0C\\u670D\\u52A1\\u4F1A\\u81EA\\u52A8\\u5206\\u6790\\u9644\\u8FD1\\u7684\\u516C\\u56ED\\u3001\\u56FE\\u4E66\\u9986\\u7B49\\uFF0C\\u5206\\u6790\\u4EBA\\u6D41\\u91CF\\u540E\\u81EA\\u52A8\\u63A8\\u8350\\u76EE\\u7684\\u5730\\u3001\\u51FA\\u884C\\u65F6\\u95F4\\u548C\\u65B9\\u5F0F\")), mdx(\"h4\", null, \"\\u672A\\u6765OA\\u670D\\u52A1\\u516C\\u53F8\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u8BB0\\u5F55\\u6574\\u4E2A\\u516C\\u53F8\\u6240\\u6709\\u53C2\\u4E0E\\u8005\\u7684\\u5DE5\\u4F5C\\u5185\\u5BB9\\u548C\\u5DE5\\u4F5C\\u8FDB\\u5EA6\\uFF0C\\u7136\\u540E\\u6839\\u636E\\u6570\\u636E\\u8FDB\\u884C\\u81EA\\u52A8\\u5316\\u8C03\\u5EA6\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u6BCF\\u4E00\\u573A\\u4F1A\\u8BAE\\u90FD\\u4F1A\\u4E8B\\u65E0\\u5DE8\\u7EC6\\u7684\\u6839\\u636E\\u5185\\u5BB9\\u751F\\u6210\\u53EF\\u6267\\u884C\\u7684\\u4EFB\\u52A1\\u5206\\u914D\\u548C\\u6392\\u671F\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u5DE5\\u4F5C\\u5185\\u5BB9\\u7684\\u6D41\\u8F6C\\u548C\\u4EFB\\u52A1\\u7684\\u81EA\\u52A8\\u5206\\u914D\\u673A\\u5236\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u6839\\u636E\\u8FD9\\u4E9B\\u5E9E\\u5927\\u7684\\u516C\\u53F8\\u8FD0\\u8F6C\\u6570\\u636E\\uFF0C\\u53EF\\u4EE5\\u667A\\u80FD\\u7684\\u5173\\u8054\\u516C\\u53F8\\u5229\\u6DA6\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u751A\\u81F3\\u4F60\\u505A\\u7684\\u6BCF\\u4E2A\\u51B3\\u5B9A\\u90FD\\u53EF\\u80FD\\u88AB\\u91C7\\u96C6\\uFF0C\\u7136\\u540E\\u8BAD\\u7EC3\\u51FA\\u80FD\\u591F\\u66FF\\u4EE3\\u4F60\\u51B3\\u7B56\\u7684\\u4E00\\u4E2A\\u865A\\u62DF\\u4EBA\")), mdx(\"h4\", null, \"\\u672A\\u6765\\u793E\\u4F1A\\u7B97\\u6CD5\\u516C\\u53F8\"), mdx(\"p\", null, \"\\u901A\\u8FC7\\u91C7\\u96C6\\u66F4\\u52A0\\u4E30\\u5BCC\\u516C\\u5F00\\u6570\\u636E\\uFF0C\\u901A\\u8FC7\\u793E\\u4F1A\\u7B97\\u6CD5\\u5927\\u8303\\u56F4\\u7684\\u6316\\u6398\\u6570\\u636E\\uFF0C\\u5F97\\u51FA\\u793E\\u4F1A\\u91D1\\u878D\\u8D8B\\u52BF\\u9884\\u6D4B\\u7684\\u76EE\\u7684\\uFF0C\\u751A\\u81F3\\u653F\\u6CBB\\u548C\\u519B\\u4E8B\\u53D1\\u5C55\\u9884\\u6D4B\\u3002\"), mdx(\"h3\", null, \"2.3 \\u672A\\u6765\\u534F\\u8BAE\\u7684\\u5B9E\\u73B0\"), mdx(\"p\", null, \"\\u4E0A\\u9762\\u90A3\\u4E48\\u591A\\u672A\\u6765\\u573A\\u666F\\uFF0C\\u5305\\u542B\\u4E86\\u5404\\u79CD\\u7A7A\\u4E2D\\u697C\\u9601\\uFF0C\\u90FD\\u662F\\u5047\\u8BBE\\u5E95\\u5C42\\u5DF2\\u7ECF\\u81EA\\u7531\\u7684\\u8DD1\\u901A\\u4E86\\u6280\\u672F\\u95EE\\u9898\\uFF0C\\u90A3\\u4E48\\u6700\\u57FA\\u7840\\u7684\\u6280\\u672F\\u95EE\\u9898\\u5C31\\u662F\\u8FD9\\u4E9B\\u672A\\u6765\\u534F\\u8BAE\\u7684\\u5B9A\\u4E49\\u548C\\u89C4\\u5219\\u3002\"), mdx(\"p\", null, \"\\u4ECE\\u6700\\u57FA\\u672C\\u7684\\u7F51\\u7EDC\\u4E92\\u8054\\u601D\\u60F3\\u63A8\\u5BFC\\uFF0C\\u672A\\u6765\\u534F\\u8BAE\\u7684\\u5B9E\\u73B0\\u524D\\u63D0\\u662F\\u5B58\\u50A8\\u3001\\u4F20\\u8F93\\u548C\\u7B97\\u529B\\u7684\\u8D85\\u4F4E\\u6210\\u672C\\u5316\\uFF0C\\u5BF9\\u4E00\\u4E2A\\u6DF7\\u6C8C\\u5927\\u6A21\\u578B\\u6301\\u7EED\\u7684\\u8F93\\u5165\\u4E0D\\u540C\\u7C7B\\u578B\\u7684\\u6570\\u636E\\uFF0C\\u8BA9\\u5B83\\u8F93\\u51FA\\u5404\\u79CD\\u51B3\\u7B56\\u548C\\u5185\\u5BB9\\u3002\"), mdx(\"h4\", null, \"\\u4E07\\u7269\\u53EF\\u4EA4\\u4E92\"), mdx(\"p\", null, \"\\u6BCF\\u4E2A\\u4EBA\\u3001\\u6BCF\\u4E2A\\u8BBE\\u5907\\u90FD\\u662F\\u53EF\\u4EE5\\u4EA4\\u4E92\\u7684\\uFF0C\\u80FD\\u591F\\u8FDE\\u63A5\\u3001\\u8F93\\u5165\\u3001\\u8F93\\u51FA\\u3002\\u4ECE\\u5E95\\u5C42\\u5230\\u4E0A\\u5C42\\u7684\\u5404\\u79CD\\u534F\\u8BAE\\u6765\\u5B9E\\u73B0\\u4ECE\\u57FA\\u672C\\u7684\\u5B58\\u50A8\\u5230\\u63D0\\u4F9B\\u5916\\u90E8\\u670D\\u52A1\\u3002\"), mdx(\"p\", null, \"\\u5F53\\u7136\\u8FD9\\u4E9B\\u8BBE\\u5907\\u7684\\u4EA4\\u4E92\\u63A7\\u5236\\u548C\\u73B0\\u5728\\u670D\\u52A1\\u5668\\u7684\\u5F88\\u591A\\u65B9\\u6848\\u90FD\\u7C7B\\u4F3C\\uFF0C\\u9700\\u8981\\u9632\\u706B\\u5899\\u3001\\u9274\\u6743\\u3001\\u7AEF\\u53E3\\u7BA1\\u7406\\u3001\\u5B89\\u5168\\u7EC4\\u4E4B\\u7C7B\\u7684\\u6982\\u5FF5\\u6765\\u7BA1\\u63A7\\u8FDE\\u63A5\\u548C\\u4EA4\\u4E92\\u3002\"), mdx(\"h4\", null, \"\\u4E07\\u7269\\u53EF\\u4E92\\u8054\"), mdx(\"p\", null, \"\\u4EBA\\u6216\\u8BBE\\u5907\\u53EF\\u4EE5\\u901A\\u8FC7\\u5404\\u79CD\\u7269\\u7406\\u94FE\\u63A5\\uFF08\\u6709\\u7EBF\\u65E0\\u7EBF\\u3001\\u5C40\\u57DF\\u7F51\\u5E7F\\u57DF\\u7F51\\uFF09\\u4E92\\u901A\\uFF0C\\u7136\\u540E\\u901A\\u8FC7\\u57FA\\u7840\\u534F\\u8BAE\\u5EFA\\u7ACB connection\\u3002\"), mdx(\"p\", null, \"\\u4EFB\\u4F55\\u8BBE\\u5907\\u5728\\u5F00\\u673A\\u540E\\u80FD\\u591F\\u81EA\\u52A8\\u7684\\u8FDE\\u63A5\\u7F51\\u7EDC\\uFF0C\\u5BFB\\u627E\\u7F51\\u5173\\uFF0C\\u6CE8\\u518C\\u8BBE\\u5907\\uFF0C\\u67E5\\u8BE2\\u534F\\u8BAE\\uFF0C\\u63A5\\u53D7\\u8C03\\u5EA6\\uFF0C\\u5BF9\\u63A5\\u8BBE\\u5907\\u8F93\\u5165\\u8F93\\u51FA\\u7B49\\u3002\"), mdx(\"h4\", null, \"\\u4E07\\u7269\\u53EF\\u64CD\\u4F5C\"), mdx(\"p\", null, \"\\u4E92\\u8054\\u4E92\\u901A\\u4E4B\\u540E\\uFF0C\\u6BCF\\u4E2A\\u8BBE\\u5907\\u7684\\u64CD\\u4F5C\\u7CFB\\u7EDF\\u548C\\u76F8\\u5173\\u534F\\u8BAE\\u90FD\\u4F1A\\u63A5\\u53D7\\u8C03\\u5EA6\\u88AB\\u64CD\\u4F5C\\u3002\"), mdx(\"p\", null, \"\\u64CD\\u4F5C\\u7CFB\\u7EDF\\u63A5\\u53D7\\u5404\\u79CD\\u63A7\\u5236\\u4FE1\\u606F\\uFF0C\\u5C06\\u63A7\\u5236\\u4FE1\\u606F\\u8F93\\u51FA\\u4E3A\\u8BBE\\u5907\\u7684\\u6267\\u884C\\u547D\\u4EE4\\uFF0C\\u5BF9\\u4E8E\\u663E\\u793A\\u5668\\u662F\\u663E\\u793A\\u5185\\u5BB9\\uFF0C\\u5BF9\\u4E8E\\u673A\\u5668\\u4EBA\\u662F\\u884C\\u8D70\\u62FF\\u53D6\\uFF0C\\u5BF9\\u4E8E\\u626B\\u5730\\u673A\\u662F\\u907F\\u969C\\u626B\\u62D6\\u3002\\u5E95\\u5C42\\u7684\\u6267\\u884C\\u662F\\u6BCF\\u4E00\\u4E2A\\u51CF\\u901F\\u5668\\u3001\\u6BCF\\u4E00\\u4E2A\\u6B65\\u8FDB\\u7535\\u673A\\u3001\\u6BCF\\u4E00\\u4E2ALED\\u706F\\u73E0\\uFF0C\\u8FD9\\u4E9B\\u53EF\\u6267\\u884C\\u7684\\u7EC8\\u7AEF\\u662F\\u64CD\\u4F5C\\u7CFB\\u7EDF\\u7684\\u6267\\u884C\\u610F\\u4E49\\u3002\"), mdx(\"h4\", null, \"\\u534F\\u8BAE\\u7684\\u610F\\u4E49\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u5E95\\u5C42\\u534F\\u8BAE\\uFF1A\\u5728\\u8F93\\u5165\\u8F93\\u51FA\\u4E0A\\u9762\\u4F20\\u8F93\\u6807\\u51C6\\u7684\\u7EA6\\u5B9A\\u534F\\u8BAE\\uFF0C\\u6BD4\\u5982\\u4E00\\u4E2A\\u8FDE\\u7EEDN\\u5404\\u9AD8\\u7535\\u5E731\\u548CM\\u4E2A\\u4F4E\\u7535\\u5E730\\u4FE1\\u53F7\\u4EE3\\u88680xffffffff\\u5B57\\u8282\\u4FE1\\u606F\\uFF0C\\u4E00\\u6BB5\\u5B57\\u8282\\u4FE1\\u606F\\u8868\\u793AABC\\u5B57\\u6BCD\\uFF0C\\u4E00\\u6BB5ABC\\u5B57\\u7B26\\u4E32\\u8868\\u793A\\u4E00\\u4E2ARUN\\u547D\\u4EE4\\uFF0C\\u4E00\\u6BB5RUN\\u547D\\u4EE4\\u8868\\u793A\\u4EC0\\u4E48\\u542B\\u4E49\\u643A\\u5E26\\u4EC0\\u4E48\\u6570\\u636E\\uFF0C\\u8FD9\\u662F\\u534F\\u8BAE\\u7684\\u5E95\\u5C42\\u7EC4\\u6210\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u4E0A\\u5C42\\u534F\\u8BAE\\uFF1A\\u5728\\u5E95\\u5C42\\u534F\\u8BAE\\u4E0A\\u6784\\u5EFA\\u66F4\\u9AD8\\u7EA7\\u7684\\u534F\\u8BAE\\uFF0C\\u6BD4\\u5982\\u4E00\\u4E2A\\u4EC0\\u4E48\\u547D\\u4EE4\\u52A0\\u4EC0\\u4E48\\u6570\\u636E\\u8868\\u793A\\u8FD9\\u4E2A\\u8BBE\\u5907\\u80FD\\u591F\\u63A5\\u53D7\\u591A\\u5927\\u7684\\u5145\\u7535\\u529F\\u7387\\u591A\\u5927\\u7684\\u7535\\u538B\\u548C\\u7535\\u6D41\\u7B49\\u7B49\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u9876\\u5C42\\u534F\\u8BAE\\uFF1A\\u5728\\u4E1A\\u52A1\\u5C42\\u9762\\uFF0C\\u672A\\u6765\\u534F\\u8BAE\\u53EF\\u80FD\\u4F1A\\u7CBE\\u786E\\u5230\\u4E2A\\u4EBA\\u884C\\u7A0B\\u548C\\u65E5\\u7A0B\\u8868\\u7684\\u6807\\u51C6\\u534F\\u8BAE\\uFF0C\\u8BA9\\u6BCF\\u4E2A\\u4EBA\\u7684\\u6570\\u636E\\u90FD\\u80FD\\u591F\\u88AB\\u89E3\\u8BFB\\u4E3A\\u6709\\u610F\\u4E49\\u7684\\u4FE1\\u606F\\u3002\")), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u65F6\\u5019\\u6BCF\\u4E2A\\u4EBA\\u50CF\\u662F\\u5145\\u7535\\u7684\\u901A\\u4FE1\\u534F\\u8BAE\\u4F3C\\u7684\\uFF0C\\u53CC\\u5411\\u6C9F\\u901A\\uFF0C\\u67E5\\u8BE2\\u652F\\u6301\\u7684\\u534F\\u8BAE\\u6808\\u3002\"), mdx(\"p\", null, \"\\u6BD4\\u5982\\uFF1A\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u57FA\\u7840\\u7684\\u516C\\u5F00\\u534F\\u8BAE\\uFF1A\\u4E2A\\u4EBA\\u884C\\u7A0B\\u548C\\u65E5\\u7A0B\\u8868\\u3001\\u4E2A\\u4EBA\\u7684\\u793E\\u4EA4\\u548C\\u670B\\u53CB\\u5708\\u3001\\u4E2A\\u4EBA\\u7684\\u8054\\u7CFB\\u65B9\\u5F0F\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u6709\\u521D\\u7EA7\\u9274\\u6743\\u7684\\u4E92\\u52A8\\uFF1A\\u793E\\u4EA4\\u8BC4\\u8BBA\\u70B9\\u8D5E\\u4EA4\\u4E92\\u3001\\u8BED\\u97F3\\u89C6\\u9891\\u7535\\u8BDD\\u3001\\u90AE\\u4EF6\\u77ED\\u4FE1\\u606F\")), mdx(\"p\", null, \"\\u4ECE\\u5E95\\u5C42\\u534F\\u8BAE\\u5230\\u9876\\u5C42\\u534F\\u8BAE\\uFF0C\\u901A\\u8FC7\\u5B58\\u50A8\\u3001\\u4F20\\u8F93\\u548C\\u7B97\\u529B\\u7684\\u52A0\\u6301\\uFF0C\\u8BA9\\u5404\\u79CD\\u8BBE\\u5907\\u80FD\\u591F\\u63A5\\u5165\\u5230\\u672A\\u6765\\u751F\\u6D3B\\u3002\"), mdx(\"p\", null, \"\\u8FD9\\u662F\\u6211\\u7545\\u60F3\\u7684\\u672A\\u6765\\u534F\\u8BAE\\u4E16\\u754C\\u3002\"));\n}\n;\nMDXContent.isMDXComponent = true;"},"next":{"fileAbsolutePath":"D:/ubug/storybook/content/blog/deno/deno.md","id":"8f37d124-ec81-52a3-85ef-12560d306667","parent":{"name":"deno","sourceInstanceName":"blog"},"excerpt":"〇、背景 Node.js 是一个了不起的应用，将 JavaScript 这个偏居一隅的脚本，变成了领域边界非常广阔的应用语言，就这一点来说怎么夸赞都不为过。 前些年 Node.js 在仅有的 ES 标准下发展壮大，不过近些年随着 ES 标准的演进，TypeScript 的广泛应用，Node.js 曾经引以为傲的生态，逐渐的变得拖后腿了。 与我而言影响比较大，让我不太习惯、不太喜欢的有： TypeScript 的集成不太行 Promise、await 等语法生态的缺失 CommonJS 和 ES…","fields":{"title":"🐍 新技术尝个鲜 - deno","slug":"/blog/deno-introduce","description":"Deno 刚发布的时候就关注到了，感觉还是很有前景的，面向未来，现在尝个鲜","date":"2020-07-20","redirects":null,"datetime":"2020-07-20 20:28:12","categories":["code"],"series":null,"tags":["deno"],"status":"online"},"frontmatter":{"published":null,"tags":["deno"],"theme":null,"slug":"deno-introduce","date":"2020-07-20 20:28:12"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"deno-introduce\",\n  \"title\": \"🐍 新技术尝个鲜 - deno\",\n  \"date\": \"2020-07-20 20:28:12\",\n  \"author\": \"Ubug\",\n  \"description\": \"Deno 刚发布的时候就关注到了，感觉还是很有前景的，面向未来，现在尝个鲜\",\n  \"categories\": [\"code\"],\n  \"tags\": [\"deno\"],\n  \"banner\": \"./banner.png\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h2\", null, \"\\u3007\\u3001\\u80CC\\u666F\"), mdx(\"p\", null, \"Node.js \\u662F\\u4E00\\u4E2A\\u4E86\\u4E0D\\u8D77\\u7684\\u5E94\\u7528\\uFF0C\\u5C06 JavaScript \\u8FD9\\u4E2A\\u504F\\u5C45\\u4E00\\u9685\\u7684\\u811A\\u672C\\uFF0C\\u53D8\\u6210\\u4E86\\u9886\\u57DF\\u8FB9\\u754C\\u975E\\u5E38\\u5E7F\\u9614\\u7684\\u5E94\\u7528\\u8BED\\u8A00\\uFF0C\\u5C31\\u8FD9\\u4E00\\u70B9\\u6765\\u8BF4\\u600E\\u4E48\\u5938\\u8D5E\\u90FD\\u4E0D\\u4E3A\\u8FC7\\u3002\"), mdx(\"p\", null, \"\\u524D\\u4E9B\\u5E74 Node.js \\u5728\\u4EC5\\u6709\\u7684 ES \\u6807\\u51C6\\u4E0B\\u53D1\\u5C55\\u58EE\\u5927\\uFF0C\\u4E0D\\u8FC7\\u8FD1\\u4E9B\\u5E74\\u968F\\u7740 ES \\u6807\\u51C6\\u7684\\u6F14\\u8FDB\\uFF0CTypeScript \\u7684\\u5E7F\\u6CDB\\u5E94\\u7528\\uFF0CNode.js \\u66FE\\u7ECF\\u5F15\\u4EE5\\u4E3A\\u50B2\\u7684\\u751F\\u6001\\uFF0C\\u9010\\u6E10\\u7684\\u53D8\\u5F97\\u62D6\\u540E\\u817F\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u4E0E\\u6211\\u800C\\u8A00\\u5F71\\u54CD\\u6BD4\\u8F83\\u5927\\uFF0C\\u8BA9\\u6211\\u4E0D\\u592A\\u4E60\\u60EF\\u3001\\u4E0D\\u592A\\u559C\\u6B22\\u7684\\u6709\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"TypeScript \\u7684\\u96C6\\u6210\\u4E0D\\u592A\\u884C\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Promise\\u3001await \\u7B49\\u8BED\\u6CD5\\u751F\\u6001\\u7684\\u7F3A\\u5931\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"CommonJS \\u548C ES Module \\u7684\\u6CA1\\u6CD5\\u517C\\u5BB9\")), mdx(\"p\", null, \"\\u529F\\u80FD\\u7684\\u652F\\u6301\\u90FD\\u53EF\\u4EE5\\uFF0C\\u4F46\\u662F\\u8003\\u8651\\u5230\\u592A\\u7075\\u6D3B\\u3001\\u5386\\u53F2\\u517C\\u5BB9\\u3001\\u7B2C\\u4E09\\u65B9\\u5E93\\u7B49\\u539F\\u56E0\\uFF0C\\u8FD8\\u662F\\u5199\\u8D77\\u6765\\u987E\\u5FCC\\u592A\\u591A\\uFF0C\\u8FD9\\u867D\\u7136\\u4E0D\\u662F Node.js \\u7684\\u9519\\uFF0C\\u4F46\\u662F\\u7528\\u8D77\\u6765\\u4E0D\\u8212\\u670D\\u8FD9\\u4E2A\\u6CA1\\u529E\\u6CD5\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\"\n  }, \"node = no + de => deno = de(story) no(de)\\n\")), mdx(\"p\", null, \"\\u6240\\u4EE5 deno \\u88AB\\u5F00\\u53D1\\u51FA\\u6765\\uFF0C\\u76EE\\u6807\\u5C31\\u662F\\u7528\\u6765\\u66FF\\u4EE3 node.js\\u3002\"), mdx(\"h2\", null, \"\\u4E00\\u3001Deno \\u5438\\u5F15\\u6211\\u7684\\u5730\\u65B9\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u5185\\u7F6E TypeScript \\u5F15\\u64CE\\uFF0C\\u76F4\\u63A5\\u652F\\u6301 ts \\u8BED\\u8A00\\u7684\\u89E3\\u91CA\\u8FD0\\u884C\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Rust \\u7684\\u5E94\\u7528\\uFF0C\\u8FD9\\u4E2A\\u4E5F\\u7B97\\u662F\\u975E\\u5E38\\u706B\\u70ED\\u7684\\u8BED\\u8A00\\uFF0C\\u5F88\\u611F\\u5174\\u8DA3\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u4E25\\u683C\\u7684\\u6743\\u9650\\u7BA1\\u63A7\\uFF0C\\u5982\\u679C node.js \\u8BFB\\u53D6\\u672C\\u5730\\u6587\\u4EF6\\u4E0A\\u4F20\\u5230\\u67D0\\u4E2A\\u670D\\u52A1\\u5668\\u6211\\u662F\\u6CA1\\u529E\\u6CD5\\u4E8B\\u5148\\u63A7\\u5236\\u7684\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u66F4\\u517C\\u5BB9 Web \\u89C4\\u8303\\u7684\\u63A5\\u53E3\\u8BBE\\u8BA1\\uFF0Cwindow\\u3001fetch\\u3001addEventListener \\u7684\\u80FD\\u529B\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Promise > callback\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"ES Module \\u6A21\\u5757\\u89C4\\u8303\\uFF0C\\u66F4\\u9762\\u5411\\u6807\\u51C6\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u5185\\u7F6E dev \\u5F00\\u53D1\\u547D\\u4EE4\")), mdx(\"h2\", null, \"\\u4E8C\\u3001Show me the code\"), mdx(\"p\", null, \"mac \\u4E0B\\u8FD0\\u884C\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-shell\"\n  }, \"curl -fsSL https://deno.land/x/install/install.sh | sh\\n\")), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1035px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/b28490ac5b3c8125a17024dfbe2fc7b7/6fb1e/deno-1.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"22.007722007722005%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAAAsSAAALEgHS3X78AAAAv0lEQVQY002O2wqDMBiDfQxRFC9EQVoPqKj1gNOpqO//PJn52WAXH6FNmsYqigLXdWGeZxzHgfM8sW3bw/urm3hd16GqKtR1LUqapkHbtijLEuxRSsHSWmMYBjGpDCilkaapBOI4Rp7nyLJM4B3f0Pd9H7Ztw3EcwXVdWAys64pxHLHvuyzimUzThGVZcd+3LGI2SRIp5idBEEjpP1YURTB9j/7h9VqegkWKiDFGFnM9c1zLwjAMZZHneVLyU/IBwvV+fVr7rUkAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"安装成功\",\n    \"title\": \"安装成功\",\n    \"src\": \"/static/b28490ac5b3c8125a17024dfbe2fc7b7/0dc48/deno-1.png\",\n    \"srcSet\": [\"/static/b28490ac5b3c8125a17024dfbe2fc7b7/2c191/deno-1.png 259w\", \"/static/b28490ac5b3c8125a17024dfbe2fc7b7/86b01/deno-1.png 518w\", \"/static/b28490ac5b3c8125a17024dfbe2fc7b7/0dc48/deno-1.png 1035w\", \"/static/b28490ac5b3c8125a17024dfbe2fc7b7/6fb1e/deno-1.png 1408w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u5B89\\u88C5\\u6210\\u529F\"), \"\\n  \")), mdx(\"p\", null, \"\\u73B0\\u5728\\u5B89\\u88C5\\u6210\\u529F\\uFF0C\\u90A3\\u4E48\\u8BD5\\u8BD5\\u7B80\\u5355\\u8FD0\\u884C\\u4E00\\u4E2A\\u5C0F\\u7A0B\\u5E8F\\uFF0C\\u7528\\u6700\\u7ECF\\u5178\\u7684\\u8FDC\\u7AEF\\u6587\\u4EF6\\u5F62\\u5F0F\\uFF1A\"), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1035px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/2705379a8c65587d9d9e1613f74621f7/ee5bc/deno-2.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"15.83011583011583%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAADCAYAAACTWi8uAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAmklEQVQI11VO0QrDIBDrd7RIUXF7sFWZW1c6nVSF/v8XZTuhgz2E5MjdJR3jAso6rNsG7z1CCLDWQmvd2BgD59xPT9MEzjn6vscwDH9gjKG7LBLXIrGkB1JMiDEgpYRaK0opOI4DOeem931vofM8t8cUdGqCEAKdvmk884p3eH3bRRh/byYtUiMCtaVZKYVxHFtDOpZSNj5B3gepp1vzmtAZVQAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"运行成功\",\n    \"title\": \"运行成功\",\n    \"src\": \"/static/2705379a8c65587d9d9e1613f74621f7/0dc48/deno-2.png\",\n    \"srcSet\": [\"/static/2705379a8c65587d9d9e1613f74621f7/2c191/deno-2.png 259w\", \"/static/2705379a8c65587d9d9e1613f74621f7/86b01/deno-2.png 518w\", \"/static/2705379a8c65587d9d9e1613f74621f7/0dc48/deno-2.png 1035w\", \"/static/2705379a8c65587d9d9e1613f74621f7/ee5bc/deno-2.png 1448w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u8FD0\\u884C\\u6210\\u529F\"), \"\\n  \")), mdx(\"h3\", null, \"\\u5199\\u4E00\\u4E2A\\u672C\\u5730\\u7684\\u7A0B\\u5E8F\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"import { serve } from \\\"https://deno.land/std@0.62.0/http/server.ts\\\";\\nconst s = serve({ port: 8000 });\\nconsole.log(\\\"http://localhost:8000/\\\");\\nfor await (const req of s) {\\n  req.respond({ body: \\\"Hello World\\\\n\\\" });\\n}\\n\\n\")), mdx(\"h2\", null, \"\\u6700\\u540E\"), mdx(\"p\", null, \"\\u73B0\\u5728\\u4ECE Node.js \\u5207\\u6362\\u5230 Deno \\u8FD8\\u592A\\u65E9\\uFF0C\\u751F\\u6001\\u3001\\u7A33\\u5B9A\\u6027\\u3001\\u5468\\u8FB9\\u652F\\u6301\\u7B49\\u8FD8\\u4E0D\\u5B8C\\u5584\\uFF0C\\u516C\\u53F8\\u7684\\u4E1A\\u52A1\\u7528 Node.js \\u662F\\u66F4\\u5408\\u9002\\u7684\\u9009\\u62E9\\uFF0C\\u4E91\\u670D\\u52A1\\u5546\\u7684 Serverless \\u4E4B\\u7C7B\\u7684\\u670D\\u52A1\\u76EE\\u524D\\u4E5F\\u53EA\\u63D0\\u4F9B Node.js \\u7684\\u73AF\\u5883\\uFF0C\\u5176\\u4E2D\\u7684\\u5F88\\u591A\\u7279\\u6027\\uFF0C\\u6BD4\\u5982 URL \\u7684\\u6A21\\u5757\\u52A0\\u8F7D\\u5F62\\u5F0F\\u7B49\\uFF0C\\u5728\\u5206\\u53D1\\u3001\\u90E8\\u7F72\\u3001\\u5927\\u89C4\\u6A21\\u7BA1\\u7406\\u4E0A\\u5408\\u4E0D\\u5408\\u9002\\u7B49\\uFF0C\\u5F88\\u591A\\u5F00\\u53D1\\u8005\\u5176\\u5B9E\\u90FD\\u5728\\u89C2\\u671B\\u3002\"), mdx(\"p\", null, \"\\u4E0D\\u8FC7\\u548C Flutter \\u4E00\\u6837\\uFF0C\\u6211\\u8FD8\\u662F\\u5F88\\u770B\\u597D Deno \\u7684\\uFF0C\\u6BD5\\u7ADF\\u770B\\u7740\\u5C31\\u6709\\u5E0C\\u671B\\u7684\\u6837\\u5B50\\u5F88\\u96BE\\u4E0D\\u559C\\u6B22\\u8D77\\u6765\\uFF0C\\u4E5F\\u613F\\u610F\\u82B1\\u65F6\\u95F4\\u5C1D\\u8BD5\\u5E76\\u96C6\\u6210\\u5728\\u81EA\\u5DF1\\u7684\\u5C0F\\u9879\\u76EE\\u4E2D\\u3002\"));\n}\n;\nMDXContent.isMDXComponent = true;"}}}}